{% extends 'base.html.twig' %}

{% block title %}Statistiques des adhérents - {{ season.title }}{% endblock %}

{% block body %}
  <header class="entry-header">
    <h1 class="entry-title">Statistiques des adhérents - {{ season.title }}</h1>
  </header>

  <div class="entry-content">
    <section class="stats-section">
      <h2>Nombre total d'adhérents actifs</h2>
      <p class="stat-total">{{ stats.total }}</p>
    </section>

    <section class="stats-section">
      <h2>Répartition par sexe</h2>
      <table class="stats-table">
        <thead>
          <tr>
            <th>Sexe</th>
            <th>Nombre</th>
            <th>Pourcentage</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Hommes</td>
            <td>{{ stats.by_sex.M }}</td>
            <td>{{ stats.total > 0 ? ((stats.by_sex.M / stats.total * 100)|number_format(1)) ~ '%' : '-' }}</td>
          </tr>
          <tr>
            <td>Femmes</td>
            <td>{{ stats.by_sex.F }}</td>
            <td>{{ stats.total > 0 ? ((stats.by_sex.F / stats.total * 100)|number_format(1)) ~ '%' : '-' }}</td>
          </tr>
          {% if stats.by_sex.unknown > 0 %}
            <tr>
              <td>Non renseigné</td>
              <td>{{ stats.by_sex.unknown }}</td>
              <td>{{ stats.total > 0 ? ((stats.by_sex.unknown / stats.total * 100)|number_format(1)) ~ '%' : '-' }}</td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </section>

    <section class="stats-section">
      <h2>Répartition par âge</h2>
      {% if stats.by_age|length > 0 %}
        <table class="stats-table">
          <thead>
            <tr>
              <th>Tranche d'âge</th>
              <th>Nombre</th>
              <th>Pourcentage</th>
            </tr>
          </thead>
          <tbody>
            {% for ageRange, count in stats.by_age %}
              <tr>
                <td>{{ ageRange }}</td>
                <td>{{ count }}</td>
                <td>{{ stats.total > 0 ? ((count / stats.total * 100)|number_format(1)) ~ '%' : '-' }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p>Aucune donnée d'âge disponible.</p>
      {% endif %}
    </section>
  </div>

  <style>
    .stats-section {
      margin: 30px 0;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 5px;
    }

    .stats-section h2 {
      color: #333;
      font-size: 1.5em;
      margin-bottom: 15px;
      border-bottom: 2px solid #007bff;
      padding-bottom: 10px;
    }

    .stat-total {
      font-size: 3em;
      color: #007bff;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
    }

    .stats-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
      background: white;
    }

    .stats-table th {
      background: #007bff;
      color: white;
      padding: 12px;
      text-align: left;
      font-weight: bold;
    }

    .stats-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #ddd;
    }

    .stats-table tbody tr:hover {
      background: #f5f5f5;
    }

    .stats-table tbody tr:last-child td {
      border-bottom: none;
    }

    .entry-header {
      margin-bottom: 30px;
    }

    .entry-title {
      font-size: 2em;
      color: #333;
    }
  </style>
{% endblock %}