{% 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;
    }
    h2 {
      margin-left: calc(var(--pico-typography-spacing-vertical) * -1);
      margin-block-start: calc(var(--pico-typography-spacing-vertical) * 2);
    }
  </style>
{% endblock extra_head %}

{% block content %}
  {% for date, grouped_articles in articles|groupby("date")|reverse %}
    <h2 id="date-{{ date }}"><small><a href="#date-{{ date }}">#</a></small> {{ date.strftime('%d %B %Y') }}</h2>
    <div class="grid">
      {% for article in grouped_articles %}
        <article>
          <header>
            <hgroup>
              <h3><a href="{{ base_url }}{{ article.url }}">{{ article.title_f }}</a></h3>
              <p>Numéro : <a href="{{ base_url }}numero/{{ article.numero.slug }}/">{{ article.numero.name }}</a></p>
            </hgroup>
          </header>
          {{ article.subtitle_f|markdown }}
          {% if article.authors %}
              <footer>
                <p>
                  {%- for author in article.authors -%}
                      <em>{{ author.forname }} {{ author.surname }}{%- if not loop.last -%}, {% endif %}</em>
                  {%- endfor -%}
                </p>
              </footer>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  {% endfor %}
  <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 %}