{% extends "sites_conformes_core/base.html" %}
{% load static dsfr_tags wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags wagtail_dsfr_tags i18n humanize %}

{% block title %}
  <title>
    {{ page.seo_title|default:page.title }}
    {% if extra_title %}: {{ extra_title }}{% endif %}
    {% if current_category %}
      — {% translate "Category:" %} {{ current_category }}
    {% endif %}
    {% if current_tag %}
      - {% translate "Tag:" %} {{ current_tag }}
    {% endif %}
    {% if current_author %}
      - {% translate "Author:" %} {{ current_author }}
    {% endif %}
    {% if current_source %}
      - {% translate "Source:" %} {{ current_source }}
    {% endif %}
    {% if current_date_from %}
      - {% translate "Start date:" %} {{ current_date_from|naturalday }}
    {% endif %}
    {% if current_date_to %}
      - {% translate "End date:" %} {{ current_date_to|naturalday }}
    {% endif %}

    {% if paginator.num_pages > 1 %}{% blocktranslate with current=posts.number total=paginator.num_pages %}- Page {{ current }} / {{ total }}{% endblocktranslate %}{% endif %}

    — {{ settings.sites_conformes_core.CmsDsfrConfig.site_title }}
  </title>
{% endblock title %}

{% if page.search_description %}
  {% block description %}
    <meta name="description" content="{{ page.search_description }}" />
  {% endblock description %}
{% endif %}

{% block social_media %}
  <meta property="og:site_name" content="{{ request.get_host }}" />
  <meta property="og:title"
        content="{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="{% canonical_url %}" />
  <meta property="og:description" content="{{ page.search_description }}" />
  <meta property="og:locale" content="{{ LANGUAGE_CODE }}" />

  {% if page.get_translations.live %}
    {% for translation in page.get_translations.live %}
      <meta property="og:locale:alternate"
            content="{{ translation.locale.language_code }}" />
    {% endfor %}
  {% endif %}

  <meta name="twitter:title"
        content="{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}" />
  <meta name="twitter:description" content="{{ page.search_description }}" />

  {% include "sites_conformes_core/blocks/socialmedia_preview_image.html" %}
{% endblock social_media %}

{% block content %}
  {% include "sites_conformes_core/blocks/heading.html" %}
  {% translate "selected" as selected_label %}
  {% translate "unselected" as unselected_label %}

  <div class="fr-container fr-pt-4w">
    {% include "sites_conformes_core/blocks/breadcrumbs.html" %}
    {% if page.show_title %}
      <h1>
        {{ page.title }}
        {% if extra_title %}: {{ extra_title }}{% endif %}
      </h1>
    {% endif %}

    {% include "sites_conformes_core/blocks/messages.html" %}

    {% if current_category.description %}
      <div class="fr-mb-4w">{{ current_category.description|richtext }}</div>
    {% else %}
      <div class="fr-mb-4w">{{ page.body }}</div>
    {% endif %}

    <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
      <div class="fr-col fr-col-md-4 fr-col-12">
        <nav class="fr-sidemenu fr-sidemenu--sticky-full-height fr-mb-0-5v" aria-labelledby="fr-sidemenu-title">
          <div class="fr-sidemenu__inner">
            <button class="fr-sidemenu__btn"
                    hidden
                    aria-controls="fr-sidemenu-wrapper-{{ page.slug }}"
                    aria-expanded="false">{% translate "Filters" %}</button>
            <div class="fr-collapse" id="fr-sidemenu-wrapper-{{ page.slug }}">
              <h2 class="fr-sidemenu__title" id="fr-sidemenu-title">{% translate "Filters and export" %}</h2>

              <form method="get"
                    action="{% pageurl page %}#posts-list"
                    id="events-filters-form">
                {% for name, value in preserved_filters %}<input type="hidden" name="{{ name }}" value="{{ value }}">{% endfor %}
                <fieldset class="fr-fieldset" aria-labelledby="events-period-legend">
                  <legend class="fr-fieldset__legend fr-fieldset__legend--regular"
                          id="events-period-legend">
                    <h3 class="fr-h6 fr-mb-0">{% translate "Filter by period" %}</h3>
                  </legend>
                  <div class="fr-fieldset__element">{{ form.date_from.as_field_group }}</div>
                  <div class="fr-fieldset__element">{{ form.date_to.as_field_group }}</div>
                  <div class="fr-fieldset__element">
                    <button type="submit" class="fr-btn">{% translate "Filter" context "submit button" %}</button>
                  </div>
                </fieldset>
              </form>

              <div id="events-other-filters">
                {% if categories and page.filter_by_category %}
                  <div class="fr-my-3w">
                    <h3 class="fr-h6">{% translate "Filter by category" %}</h3>
                    <ul class="fr-tags-group fr-mt-1w">
                      {% for category in categories %}
                        <li>
                          <a type="button"
                             class="fr-tag"
                             href="{% pageurl page %}{% toggle_url_filter category=category %}#posts-list"
                             title="{% if category.slug == current_category.slug %}{{ selected_label }} {% else %}{{ unselected_label }} {% endif %}"
                             {% if category.slug == current_category.slug %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}>
                            {{ category.name }}
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}

                {% if tags and page.filter_by_tag %}
                  <div class="fr-my-3w">
                    <h3 class="fr-h6">{% translate "Filter by tag" %}</h3>
                    <ul class="fr-tags-group fr-mt-1w">
                      {% for tag in tags %}
                        <li>
                          <a type="button"
                             class="fr-tag"
                             href="{% pageurl page %}{% toggle_url_filter tag=tag %}#posts-list"
                             {% if tag.id == current_tag.id %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}
                             title="{% if tag.slug in current_tag %}{{ selected_label }} {% else %}{{ unselected_label }}{% endif %}">
                            {{ tag }}
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}

                {% if authors and page.filter_by_author %}
                  <div class="fr-my-3w">
                    <h3 class="fr-h6">{% translate "Filter by author" %}</h3>
                    <ul class="fr-tags-group fr-mt-1w">
                      {% for author in authors %}
                        <li>
                          <a type="button"
                             class="fr-tag"
                             href="{% pageurl page %}{% toggle_url_filter author=author %}#posts-list"
                             title="{% if author == current_author %}{{ selected_label }} {% else %}{{ unselected_label }} {% endif %}"
                             {% if author == current_author %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}>{{ author.name }}</a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}

                {% if sources and page.filter_by_source %}
                  <div class="fr-my-3w">
                    <h3 class="fr-h6">{% translate "Filter by source" %}</h3>
                    <ul class="fr-tags-group fr-mt-1w">
                      {% for source in sources %}
                        <li>
                          <a type="button"
                             class="fr-tag"
                             href="{% pageurl page %}{% toggle_url_filter source=source %}#posts-list"
                             title="{% if source == current_source %}{{ selected_label }} {% else %}{{ unselected_label }}{% endif %}"
                             {% if source == current_source %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}>{{ source.name }}</a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}
              </div>

              <h3 class="fr-h6">{% translate "Export" %}</h3>
              <ul class="fr-btns-group fr-mt-1w">
                <li>
                  <a href="{% routablepageurl page 'ical_view' %}"
                     class="fr-btn fr-btn--secondary">{% translate "Download events (iCal)" %}</a>
                </li>
              </ul>

              {% if page.past_events.count %}
                <h3 class="fr-h6">{% translate "Archives" %}</h3>

                <ul class="fr-btns-group fr-mt-1w">
                  <li>
                    <a href="{% routablepageurl page 'archives_view' %}"
                       class="fr-btn fr-btn--tertiary">{% translate "See archives" %}</a>
                  </li>
                </ul>
              {% endif %}

            </div>
          </div>
        </nav>
      </div>

      <div class="fr-col fr-col-md-8 fr-col-12" id="posts-list">
        <h2>{% translate "Events" %}</h2>
        <p class="fr-mb-2w"
           id="events-results-count"
           aria-live="polite"
           aria-atomic="true">
          {% blocktranslate count counter=paginator.count %}{{ counter }} event found{% plural %}{{ counter }} events found{% endblocktranslate %}
        </p>
        <div id="events-results">
          <div class="fr-grid-row fr-grid-row--gutters">
            {% include "sites_conformes_events/blocks/events_index_posts_list.html" %}
          </div>
          {% if posts.paginator.num_pages > 1 %}
            <div class="fr-container fr-grid-row fr-grid-row--center fr-mt-6w">{% dsfr_pagination posts %}</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

{% block extra_js %}
  <script src="{% static 'events/filters.js' %}"></script>
{% endblock extra_js %}