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

{% load static design_system_tags wagtailcore_tags wagtailimages_tags i18n %}

{% block title %}
    <title>{{ title }} — {{ settings('wagtail_design_system.WagtailDesignSystemConfig', use_default_site=True).site_title }}</title>
{% endblock title %}

{% block description %}
    <meta name="description" content="{{ search_description }}" />
{% endblock description %}

{% block social_media %}
    <meta property="og:site_name"
          content="{{ settings('wagtail_design_system.WagtailDesignSystemConfig', use_default_site=True).site_title }}" />
    <meta property="og:title" content="{{ title }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ request.build_absolute_uri }}" />
    <meta property="og:description" content="{{ search_description }}" />
    <meta property="og:locale" content="{{ LANGUAGE_CODE }}" />

    <meta name="twitter:title" content="{{ title }}" />
    <meta name="twitter:description" content="{{ search_description }}" />
{% endblock social_media %}

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

    <div class="design-system-container design-system-mt-6w">
        {% design_system_breadcrumb breadcrumb %}
        <h1>{{ title }}</h1>
    </div>

    <div class="design-system-container design-system-mt-6w">
        <div class="design-system-grid-row design-system-grid-row--gutters design-system-mb-3w">
            {% for entry in object_list %}
                <div class="design-system-col design-system-col-md-6">
                    <div class="design-system-card design-system-enlarge-link">
                        <div class="design-system-card__body">
                            <div class="design-system-card__content">
                                <h2 class="design-system-card__title">
                                    <a href="{{ entry.url }}">{{ entry.title }}</a>
                                </h2>
                            </div>
                        </div>
                        {% if entry.header_image %}
                            <div class="design-system-card__header">
                                <div class="design-system-card__img">
                                    <img class="design-system-responsive-img"
                                         src="{{ entry.header_image.file.url }}"
                                         alt="">
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% empty %}
                <p>Aucun article trouvé.</p>
            {% endfor %}
        </div>
    </div>

    {% if posts.paginator.num_pages > 1 %}
        <div class="design-system-container design-system-grid-row design-system-grid-row--center design-system-mt-6w">{% design_system_pagination posts %}</div>
    {% endif %}

{% endblock content %}
