{% 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 %}
  {% for slug, keyword in keywords.items() %}
    {% if loop.index < 20 %}
      <a href="/mot-clef/{{ keyword.slug }}/">#{{ keyword.name }}</a>({{ keyword.articles|length }}){%- if not loop.last -%}, {% endif %}
    {% endif %}
  {% endfor %}…
  <details>
    <summary role="button">Voir plus de mot-clés :</summary>
    {% for slug, keyword in keywords.items() %}
      {% if loop.index >= 20 %}
        <a href="/mot-clef/{{ keyword.slug }}/">#{{ keyword.name }}</a>({{ keyword.articles|length }}){%- if not loop.last -%}, {% endif %}
      {% endif %}
    {% endfor %}
  </details>
  <div class="grid">
  {% for numero in numeros %}
    <article>
      <header>
        <hgroup>
          <h2><a href="/numero/{{ numero.name }}/">{{ 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="/numero/{{ numero.name }}/article/{{ article.id }}/">{{ article.title_f }}</a></li>
        {% endfor %}
      </ul>
    </article>
  {% endfor %}
  </div>
{% endblock content %}
