{% extends "base.html" %}

{% block extra_head %}
  <style type="text/css">
    :root {
      --pico-spacing: 0.25rem;

      /* Grid adjustments, see
      https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
      */
      /**
       * User input values.
       */
      --grid-layout-gap: 10px;
      --grid-column-count: 1;
      --grid-item--min-width: 100px;

      /**
       * Calculated values.
       */
      --gap-count: calc(var(--grid-column-count) - 1);
      --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
      --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    }

    @media (min-width: 576px) {
      :root {
        --grid-column-count: 1;
      }
    }

    @media (min-width: 768px) {
      :root {
        --grid-column-count: 2;
      }
    }

    @media (min-width: 992px) {
      :root {
        --grid-column-count: 3;
      }
    }

    .content {
      width: 100%;
    }

    .grid {
      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
      grid-gap: var(--grid-layout-gap);
    }

    .grid article header {
      text-align: center;
    }
  </style>
{% endblock extra_head %}

{% block content %}
  <div class="grid">
  {% for numero in numeros %}
    <article>
      <header>
        <hgroup>
          <h2><a href="{{ base_url }}numero/{{ numero.slug }}/">{{ numero.name }}</a></h2>
          <p>Le {{ numero.articles.0.date.strftime('%d %B %Y') }}</p>
        </hgroup>
      </header>
      <ul>
        {% for article in numero.articles %}
          <li><a href="{{ base_url }}{{ article.url }}">{{ article.title_f }}</a></li>
        {% endfor %}
      </ul>
    </article>
  {% endfor %}
  </div>
  <article>
    <dl>
      <dt>Mots-clefs :</dt>
      <dd>
        {% for slug, keyword in keywords.items() %}
          {% if loop.index < 20 %}
            <a href="{{ base_url }}mot-clef/{{ keyword.slug }}/">#{{ keyword.name }}</a>({{ keyword.articles|length }}){%- if not loop.last -%}, {% endif %}
          {% endif %}
        {% endfor %}{% if keywords|length >= 20 %}…
          <details>
            <summary role="button">Voir plus de mot-clés</summary>
            {% for slug, keyword in keywords.items() %}
              {% if loop.index >= 20 %}
                <a href="{{ base_url }}mot-clef/{{ keyword.slug }}/">#{{ keyword.name }}</a>({{ keyword.articles|length }}){%- if not loop.last -%}, {% endif %}
              {% endif %}
            {% endfor %}
          </details>
        {% endif %}
      </dd>
      <dt>Auteur·ices :</dt>
      <dd>
        {% for slug, author in authors.items() %}
          {% if loop.index < 20 %}
            <a href="{{ base_url }}auteur/{{ author.slug }}/">#{{ author }}</a>({{ author.articles|length }}){%- if not loop.last -%}, {% endif %}
          {% endif %}
        {% endfor %}{% if authors|length >= 20 %}…
          <details>
            <summary role="button">Voir plus d’auteur·ices</summary>
            {% for slug, author in authors.items() %}
              {% if loop.index >= 20 %}
                <a href="{{ base_url }}auteur/{{ author.slug }}/">#{{ author }}</a>({{ author.articles|length }}){%- if not loop.last -%}, {% endif %}
              {% endif %}
            {% endfor %}
          </details>
        {% endif %}
      </dd>
    </dl>
  </article>
{% endblock content %}