{% extends "base.html" %}
{% block body %}
<div class="reports-layout">
  <header class="reports-header">
    <nav class="reports-breadcrumb">
      <a href="{{ css_path }}day.html">Dashboard</a>
      <span>/</span>
      <span>Reports</span>
    </nav>
    <h1 class="reports-title">Reports Archive</h1>
    <p class="reports-subtitle">Monthly and yearly statistics for the MeshCore network</p>
  </header>

  {% for section in report_sections %}
  <section style="margin-bottom: var(--space-3xl);">
    <h2 style="font-family: 'Instrument Serif', Georgia, serif; font-size: var(--text-xl); margin-bottom: var(--space-lg);">{{ section.role | capitalize }}</h2>
    <p style="font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-lg);">
      {{ section.description }}
    </p>

    {% if section.years %}
    <div class="archive-list">
      {% for year_data in section.years %}
      <article class="archive-year">
        <h3 class="archive-year-title"><a href="{{ css_path }}reports/{{ section.role }}/{{ year_data.year }}/">{{ year_data.year }}</a></h3>
        <div class="archive-months">
          {% for month_num in range(1, 13) %}
          {% set month_data = year_data.months | selectattr('month', 'equalto', month_num) | list | first %}
          {% if month_data %}
          <a href="{{ css_path }}reports/{{ section.role }}/{{ year_data.year }}/{{ '%02d' | format(month_num) }}/" class="archive-month">{{ month_abbrs[month_num] }}</a>
          {% else %}
          <span class="archive-month empty">{{ month_abbrs[month_num] }}</span>
          {% endif %}
          {% endfor %}
        </div>
      </article>
      {% endfor %}
    </div>
    {% else %}
    <p style="font-size: var(--text-sm); color: var(--text-muted);">No reports available yet.</p>
    {% endif %}
  </section>
  {% endfor %}

  <footer class="site-footer" style="margin-top: var(--space-3xl);">
    <a href="{{ css_path }}day.html">Back to Dashboard</a>
  </footer>

  {% include "credit.html" %}
</div>
{% endblock %}
