{% extends "base.html" %}
{% block title %}{{ year }} report · Perpetual Calendar{% endblock %}
{% block body_class %}report-page{% endblock %}
{% block content %}
  <main class="report-shell">
    <header class="report-header">
      <a class="back-button" href="{{ url_for('calendar') }}" aria-label="Back to calendar">← Calendar</a>
      <form action="{{ url_for('logout') }}" method="post">
        <button class="logout-button" type="submit">Sign out</button>
      </form>
    </header>

    <section class="report-intro">
      <p class="eyebrow">Yearly overview</p>
      <div class="year-navigation">
        <a href="{{ url_for('report', year=year - 1) }}" aria-label="Previous year">←</a>
        <h1>{{ year }} report</h1>
        <a href="{{ url_for('report', year=year + 1) }}" aria-label="Next year">→</a>
      </div>
      <p>Money and recorded days grouped by day category.</p>
    </section>

    <section class="report-categories" aria-label="Yearly totals by category">
      {% for category in categories %}
        <article class="report-card report-card--{{ category.key }}">
          <div class="category-title">
            <span class="category-swatch" aria-hidden="true"></span>
            <h2>{{ category.label }}</h2>
          </div>
          <p class="category-amount">€{{ "%.2f" | format(category.amount_cents / 100) }}</p>
          <p class="category-days">{{ category.days }} {{ "day" if category.days == 1 else "days" }}</p>
        </article>
      {% endfor %}
    </section>

    <section class="report-total">
      <div>
        <p class="eyebrow">Annual total</p>
        <p class="total-amount">€{{ "%.2f" | format(total_cents / 100) }}</p>
      </div>
      <p class="total-days">{{ total_days }} recorded {{ "day" if total_days == 1 else "days" }}</p>
    </section>
  </main>
{% endblock %}