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

{% block title %}
  <title>{{ page.seo_title|default:page.title }} — {{ settings.sites_faciles_content_manager.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="{{ page.full_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 "blocks/socialmedia_preview_image.html" %}
{% endblock social_media %}

{% block content %}
  {% include "sites_faciles_content_manager/blocks/heading.html" %}

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

    {% include "sites_faciles_content_manager/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">
          <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 }}">
              <div class="fr-sidemenu__title" id="fr-sidemenu-title">{% translate "Filters and export" %}</div>

              <h2 class="fr-h6">{% translate "Filter by date" %}</h2>

              {{ form }}

              {% if categories and page.filter_by_category %}
                <div class="fr-my-3w">
                  <h2 class="fr-h6">{% translate "Filter by category" %}</h2>
                  <ul class="fr-tags-group fr-mt-1w">
                    {% for category in categories %}
                      <li>
                        <a class="fr-tag"
                           href="{% pageurl page %}{% toggle_url_filter category=category %}"
                           {% 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">
                  <h2 class="fr-h6">{% translate "Filter by tag" %}</h2>
                  <ul class="fr-tags-group fr-mt-1w">
                    {% for tag in tags %}
                      <li>
                        <a class="fr-tag"
                           href="{% pageurl page %}{% toggle_url_filter tag=tag %}"
                           {% if tag.id == current_tag.id %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}>
                          {{ tag }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}

              {% if authors and page.filter_by_author %}
                <div class="fr-my-3w">
                  <h2 class="fr-h6">{% translate "Filter by author" %}</h2>
                  <ul class="fr-tags-group fr-mt-1w">
                    {% for author in authors %}
                      <li>
                        <a class="fr-tag"
                           href="{% pageurl page %}{% toggle_url_filter author=author %}"
                           {% 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">
                  <h2 class="fr-h6">{% translate "Filter by source" %}</h2>
                  <ul class="fr-tags-group fr-mt-1w">
                    {% for source in sources %}
                      <li>
                        <a class="fr-tag"
                           href="{% pageurl page %}{% toggle_url_filter source=source %}"
                           {% if source == current_source %}aria-pressed="true"{% else %}aria-pressed="false"{% endif %}>{{ source.name }}</a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}

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

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

                <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">
        <div class="fr-grid-row fr-grid-row--gutters">{% include "sites_faciles_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>
{% endblock content %}

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