{% extends "agenda_culturel/page.html" %}
{% block title %}
  {% block og_title %}Administration des périodes remarquables{% endblock %}
{% endblock %}
{% load utils_extra %}
{% load cat_extra %}
{% block entete_header %}
  {% css_categories %}
{% endblock %}
{% block sidemenu-bouton %}
  <li>
    <a href="#contenu-principal" aria-label="Aller au contenu">{% picto_from_name "chevron-up" %}</a>
  </li>
  <li>
    <a href="#sidebar" aria-label="Aller au menu latéral">{% picto_from_name "chevron-down" %}</a>
  </li>
{% endblock %}
{% block content %}
  <div class="grid two-columns">
    <article>
      <header>
        <div class="slide-buttons">
          <a href="{% url 'add_specialperiod' %}" role="button">Ajouter {% picto_from_name "plus-circle" %}</a>
          <a href="{% url 'load_specialperiods_from_ical' %}" role="button">Importer (ical) {% picto_from_name "upload" %}</a>
        </div>
        <h1>Périodes spéciales</h1>
      </header>
      {% include "agenda_culturel/navigation.html" with page_obj=page_obj %}
      {% if object_list %}
        {% for sp in object_list %}
          <article>
            <header>
              <div class="slide-buttons">
                <a href="{% url 'edit_specialperiod' sp.pk %}" role="button">Modifier {% picto_from_name "edit-3" %}</a>
                <a href="{% url 'delete_specialperiod' sp.pk %}" role="button">Supprimer {% picto_from_name "trash-2" %}</a>
              </div>
              <h2>{{ sp.get_periodtype_display }}&nbsp;: {{ sp.name }}</h2>
              <p>
                {% if sp.start_date == sp.end_date %}
                  le {{ sp.start_date }}
                {% else %}
                  du {{ sp.start_date }} au {{ sp.end_date }}
                {% endif %}
              </p>
            </header>
          </article>
        {% endfor %}
      {% else %}
        <p>Il n'y a aucune période spéciale définie.</p>
      {% endif %}
      <footer>
        {% include "agenda_culturel/navigation.html" with page_obj=page_obj %}
      </footer>
    </article>
    {% include "agenda_culturel/side-nav.html" with current="special_periods" %}
  </div>
{% endblock %}
