{% extends "sites_conformes_core/base.html" %}

{% load i18n static dsfr_tags wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags wagtail_dsfr_tags %}

{% block title %}
  <title>{{ page.seo_title|default:page.title }} — {{ 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" %}

  {% with categories=page.event_categories.all %}

    <div class="fr-container fr-mt-6w">
      <div class="fr-grid-row fr-grid-row--gutters">
        <div class="fr-col-12">
          {% include "sites_conformes_core/blocks/breadcrumbs.html" %}
          {% if page.show_title %}
            <h1 class="fr-display--sm">{{ page.title }}</h1>
          {% endif %}
        </div>
      </div>
      <p>
        <strong>
          <span class="fr-icon-calendar-event-fill click-to-copy" aria-hidden="true"></span>
          {% event_date_range page.event_date_start page.event_date_end %}
        </strong>
        {% if categories %}
          |
          {% for category in categories %}
            <a href="{% pageurl page.get_parent %}?category={{ category.slug }}">{{ category.name }}</a>
            {% if not forloop.last %},{% endif %}
          {% endfor %}
        {% endif %}
      </p>
    </div>

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

    {% include "sites_conformes_core/blocks/blocks_stream.html" with stream=page.body %}

    {% with authors=page.authors.all %}
      {% if authors %}
        <div class="fr-container fr-my-6w">
          <h2>{% translate "Posted by:" %}</h2>
          <div class="fr-grid-row fr-grid-row--gutters">
            {% for author in authors %}
              {% include "sites_conformes_blog/blocks/contact_card.html" with value=author %}
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endwith %}

    {% if categories %}
      {% for category in categories %}
        {% include "sites_conformes_core/blocks/blocks_stream.html" with stream=category.colophon %}
      {% endfor %}
    {% endif %}
  {% endwith %}

  <div class="fr-container fr-my-6w">

    <div class="fr-card{% if page.header_image %} fr-card--horizontal{% else %} fr-card--download{% endif %}">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h2 class="fr-card__title">{{ page.title }}</h2>
          <ul class="fr-card__desc">
            <li>
              <strong>{% translate "Date:" %}</strong>{{ page.event_date_start }} - {{ page.event_date_end }}
            </li>
            <li>
              <strong>{% translate "Location:" %}</strong> {{ page.location }}
            </li>
            {% if page.registration_url %}
              <li>
                <strong>{% translate "Registration link:" %}</strong> <a href="{{ page.registration_url }}">{{ page.registration_url }}</a>
              </li>
            {% endif %}
          </ul>

          <div class="fr-card__start">
            <ul class="fr-tags-group">
              {% for tag in page.tags.all|dictsort:"slug" %}
                <a class="fr-tag"
                   target="_self"
                   href="{% pageurl page.get_parent %}?tag={{ tag.slug }}">{{ tag }}</a>
              {% endfor %}
            </ul>
          </div>
        </div>

        <div class="fr-card__footer">
          <div class="fr-btns-group fr-btns-group--inline-lg">
            <a href="{% routablepageurl page 'ical_view' %}"
               class="fr-btn fr-btn--secondary">{% translate "Add to your calendar (iCal)" %}</a>
          </div>
        </div>
      </div>

      <div class="fr-card__header">
        <div class="fr-card__img">
          {% if page.cover %}
            {% image page.cover width-450 as header_image %}
            <img class="fr-responsive-img" src="{{ header_image.url}}" alt="" />
          {% else %}
            <img class="fr-responsive-img"
                 src="{% static 'dsfr/dist/artwork/pictograms/digital/calendar.svg' %}"
                 alt="" />
          {% endif %}
        </div>
      </div>

    </div>
  </div>
  {% if settings.sites_conformes_core.CmsDsfrConfig.show_share_links and settings.sites_conformes_core.CmsDsfrConfig.share_links_events %}
    {% include "sites_conformes_core/blocks/share.html" %}
  {% endif %}
{% endblock content %}