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

{% load static design_system_tags wagtailcore_tags wagtailimages_tags i18n %}

{% block title %}
    <title>{{ full_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 }}" />

    {% if page.header_image %}
        <meta name="twitter:card" content="summary_large_image" />
        {% image page.header_image fill-1200x627 as header_image %}
        <meta property="og:image" content="{{ header_image.full_url }}" />
        <meta name="twitter:image" content="{{ header_image.full_url }}" />
    {% else %}
        <meta name="twitter:card" content="summary" />
    {% endif %}
{% endblock social_media %}

{% block content %}
    {% include "sites_faciles/heading.html" %}
    {% include "sites_faciles/messages.html" %}

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

        <div class="design-system-container design-system-mt-6w">
            <div class="design-system-grid-row design-system-grid-row--gutters">
                <div class="design-system-col-12">
                    {% include "sites_faciles/breadcrumbs.html" %}
                    <h1 class="design-system-display--sm">{{ page.title }}</h1>
                </div>
            </div>
            <p>
                <!--

               
                Publié le <a href="{% url 'design_system_blog:archive_year' page.get_parent.slug page.date.year %}">{{ page.date |date:'l j F Y' }}</a>
                 -->>
                {% if categories %}
                    |
                    {% for category in categories %}
                        <a href="{% url 'design_system_blog:category' page.get_parent.slug category.slug %}">{{ category.name }}</a>
                        {% if not forloop.last %},{% endif %}
                    {% endfor %}
                {% endif %}
            </p>
        </div>

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

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

            {% endif %}
        {% endwith %}

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

    <div class="design-system-container design-system-my-6w">
        {% for tag in page.tags.all|dictsort:"slug" %}
            <a class="design-system-tag"
               target="_self"
               href="{% url 'design_system_blog:tag' page.get_parent.slug tag.slug %}">{{ tag }}</a>
        {% endfor %}
    </div>

{% endblock content %}
