<!DOCTYPE html>
<html lang="fr">
    {% load event_extra %}
    {% load cache %}
    {% load messages_extra %}
    {% load utils_extra %}
    {% load duplicated_extra %}
    {% load rimports_extra %}
    {% load static %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Pommes de lune — {% block title %}{% endblock %}</title>
    <meta name="google-site-verification" content="pvRD0rc_xIE-1IYmbao0kj5ngGo1IWxJqKwoxrQwxuA" />
    <meta name="msvalidate.01" content="60E9E7DB667A3C4D6697261420DF3D1B" />
    <meta name="keywords" content="Clermont-Ferrand, Puy-de-Dôme, agenda culturel, agenda participatif, sortir à clermont, sorties, concerts, théâtre, danse, animations, ateliers, lectures">
    <script src="{% static 'js/modal.js' %}"></script>
    
    {% load static %}
    <meta property="og:title" content="Pommes de lune — {% block og_title %}{% endblock %}" />
    <meta property="og:description" content="{% block og_description %}Où sortir à Clermont-Ferrand? Retrouve tous les bons plans sur l'agenda participatif des événements culturels à Clermont-Ferrand et dans le Puy-de-Dôme{% endblock %}" />
    <meta property="og:image" content="{% block og_image %}https://{{ request.get_host }}{% get_media_prefix %}screenshot.png{% endblock %}" />
    <meta property="og:locale" content="fr_FR" />
    <meta property="og:url" content="{{ request.build_absolute_uri }}" />

    <link rel="stylesheet" href="{% static 'air-datepicker/air-datepicker.css' %}">
    
    {% if debug %}
    <link rel="icon" type="image/svg+xml" href="{% static 'images/favicon-dev.svg' %}">
    {% else %}
    <link rel="icon" type="image/svg+xml" href="{% static 'images/favicon.svg' %}">
    {% endif %}

    {% load compress %}

    {% compress css %}
        <link type="text/x-scss" href="{% static 'style.scss' %}" rel="stylesheet" media="screen">
    {% endcompress %}

    {% block entete_header %}
    {% endblock %}
</head>

<body class="{% block body-class %}contenu{% endblock %} {% if user.is_authenticated %}authenticated{% endif %}">
    <div id="boutons-fixes">
        <ul>
            {% block sidemenu-bouton %}{% endblock %}
            {% if user.is_authenticated %}{% block configurer-bouton %}<li class="configurer-bouton"><a href="{% url 'administration' %}" aria-label="Administrer">{% picto_from_name "settings" %}</a></li>{% endblock %}{% endif %}
            {% block quand-bouton %}<li class="quand-bouton" href="#quand-popup" data-target="quand-popup" onClick="toggleModal(event)"><a aria-label="Quand">{% picto_from_name "calendar" %}</a></li>{% endblock %}
            {% block rechercher-bouton %}<li class="rechercher-bouton"><a href="{% url 'event_search' %}" aria-label="Rechercher">{% picto_from_name "search" %}</a></li>{% endblock %}
            {% block ajouter-bouton %}<li class="ajouter-bouton"><a href="{% url 'add_event' %}" aria-label="Ajouter un événement">{% picto_from_name "plus" %}</a></li>{% endblock %}
        </ul>
    </div>
    <div id="main-nav">
        <div class="header">
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label>
            <ul class="menu">
                <li><a id="quand" href="#quand-popup" data-target="quand-popup" onClick="toggleModal(event)">Quand ? {% picto_from_name "calendar" %}</a></li>                
                {% block rechercher-menu %}<li id="menu-rechercher" class="rechercher-bouton"><a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a></li>{% endblock %}
                {% block ajouter-menu %}<li id="menu-ajouter" class="ajouter-bouton"><a href="{% url 'add_event' %}">Ajouter un événement {% picto_from_name "plus-circle" %}</a></li>{% endblock %}
            </ul>
        </div>
        <nav class="container-fluid">
            <ul class="menu-droite">
                <li>
                    <a href="{% url 'home' %}" aria-label="Retour accueil">
                        <img src="{% static 'images/favicon.svg' %}" />
                    </a>
                </li>
                <li>
                    <div>
                        {% if user.is_authenticated %}
                        {{ user.username }} @
                        {% endif %}
                        <a href="{% url 'home' %}" aria-label="Retour accueil">Pommes de lune</a>
                        </div>
                        <div class="soustitre">Agenda participatif des sorties culturelles à Clermont-Ferrand et aux environs</div>
                    </li>
            </ul>
        </nav>
        {% if user.is_authenticated %}
        <div id="badges">
            {% if perms.agenda_culturel.view_recurrentimport %}
            {% show_badges_rimports "bottom" %}
            {% endif %}
            {% if perms.agenda_culturel.change_event %}
            {% show_badges_events "bottom" %}
            {% endif %}
            {% if perms.agenda_culturel.change_duplicatedevents %}
            {% show_badge_duplicated "bottom" %}
            {% endif %}
            {% if perms.agenda_culturel.change_place and perms.agenda_culturel.change_event %}
            {% show_badge_unknown_places "bottom" %}
            {% endif %}
            {% if perms.agenda_culturel.view_message %}
            {% show_badge_messages "bottom" %}
            {% endif %}
            {% show_badge_moderate %}
            <a class="link" href="{% url 'administration' %}">Administrer {% picto_from_name "settings" %}</a>
        </div>
        {% endif %}
    </div>
    <main class="container{% block fluid %}-fluid{% endblock %}">
      {% if messages %}
        {% for message in messages %}
        <p {% if message.tags %} class="message {{ message.tags }} " {% endif %}> {{ message }}</p>
        {% endfor %}
      {% endif %}

        {% block content %}{% endblock %}
    </main>
    
    <footer class="container-fluid">
        <div class="grid">

            <div>
                <a href="{% url 'view_places' %}">{% picto_from_name "map-pin" %} lieux</a><br>
                <a href="{% url 'view_organisations' %}">{% picto_from_name "users" %} organisateurs</a><br>
                <a href="{% url 'view_all_tags' %}">{% picto_from_name "tag" %} étiquettes</a><br>
                <a href="{% url 'statistics' %}">{% picto_from_name "pie-chart" %} statistiques</a>
            </div>

            <div>
                <a href="{% url 'about' %}">{% picto_from_name "users" %} à propos</a><br>
                <a href="{% url 'mentions_legales' %}">{% picto_from_name "align-left" %} mentions légales</a><br>
                <a href="{% url 'contact' %}">{% picto_from_name "mail" %} contact</a><br>
                {% if user.is_authenticated %}
                <a href="{% url 'administration' %}">{% picto_from_name "settings" %} administrer</a>
                <p>Vous êtes connecté(e) en tant que {{ user }}</p>
                {% else %}
                <a href="{% url 'login' %}?next={% url 'administration' %}">{% picto_from_name "log-in" %} administrer</a>
                {% endif %}
            </div>
        </div>
        <div class="grid">
            Fabriqué en Auvergne, 100% sans IA
        </div>
    </footer>
    <dialog id="quand-popup">
        <article>
            <header>
                <a href="#quand-popup" 
                aria-label="Fermer" 
                class="close" 
                data-target="quand-popup"
                onClick="toggleModal(event)"></a>

                <h2>Aller à la date</h2>
            </header>
            <form method="post" action="{% url 'day_view_when' %}?{% block when_parameters %}{% endblock %}">
                {% csrf_token %}
                <input type="date" name="when" required="" id="when_picker" value="{% if init_date %}{{ init_date|date:"Y-m-d" }}{% else %}{% now "Y-m-d" %}{% endif %}"">
                <input type="submit" value="Voir les événements">
            </form>
            <footer>
                <p>Accès rapides&nbsp;:</p>
                <ul>
                    {% block navigation-menu %}
                    <li><a href="{% url 'a_venir' %}">maintenant</a></li>
                    <li><a href="{% url 'cette_semaine' %}">cette semaine</a></li>
                    <li><a href="{% url 'ce_mois_ci' %}">ce mois-ci</a></li>
                    {% endblock%}                
                </ul>
            </footer>
        </article>
    </dialog>

    <script>
        var exports = {
          default: {}
        }
    </script>
    
    <script src="{% static 'air-datepicker/air-datepicker.js' %}"></script>
    <script src="{% static 'air-datepicker/fr.js' %}"></script>
    <script>
      new exports.AirDatepicker('#when_picker', {
        locale: exports.default,
        inline: true,
        dateFormat: "yyyy-MM-dd",
        selectedDates: [new Date("{% if init_date %}{{ init_date|date:"Y-m-d" }}{% else %}{% now "Y-m-d" %}{% endif %}")],
        navTitles: {
           days: 'MMMM yyyy'
        }

      })
      console.log("oui");
    </script>
    </body>
    </html>
</body>