{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/css/index.css">
{% endblock %}

{% block body %}
<header class="page-header">
  <img src="/tildes-statistics.png" alt="Tildes Statistics Logo">
  <h1>Tildes Statistics</h1>
</header>

<main class="page-main">
  <h2>General</h2>

  <p>
    There are currently an estimated
    <span class="underline">{{ user_count }}</span>
    registered users on Tildes.
  </p>

  <img class="chart" src="/charts/main-user-count.svg" alt="User Count Chart">

  <p>
    See also the
    <a href="/charts-untruncated/main-user-count.svg">untruncated version</a>.
  </p>

  <details open>
    <summary>Groups Overview</summary>

    <table>
      <thead>
        <tr>
          <th>Group</th>
          <th>Subscribers</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        {% for group in groups %}
        <tr>
          <td>
            <a href="/{{ group.name }}">{{ group.name }}</a>
          </td>
          <td>
            {{ group.subscribers }}&nbsp;<span class="small"
              title="Percentage of subscribers compared to the highest-subscribed group."
            >({{ group.subscribers|percentage(user_count) }})</span>
          </td>
          <td>
            {% if let Some(description) = group.description %}
            {{ description }}
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </details>
</main>
{% endblock %}