{% 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-my-6w">
        {% design_system_breadcrumb breadcrumb %}
        <h1>{% translate "Tags" %}</h1>

        <div class="design-system-mb-2w">
            {% for first_letter in sorted_tags.keys|dictsort:0 %}
                <a href="#{{ first_letter }}" class="design-system-tag">{{ first_letter }}</a>
            {% endfor %}
        </div>

        {% for first_letter, tags in sorted_tags.items|dictsort:0 %}
            <h2 id="{{ first_letter }}">{{ first_letter }}</h2>
            <ul>
                {% for tag in tags|dictsort:"slug" %}
                    <li>
                        <a href="{% url 'global_tag' tag.slug %}"><strong>{{ tag.name }}</strong> ({{ tag.usecount }})</a>
                    </li>
                {% endfor %}
            </ul>
        {% endfor %}
    </div>
{% endblock content %}
