{% extends "base.html" %}
{% block title %}Auswertungen | {{ app_name }}{% endblock %}
{% block content %}
  <section class="page-hero">
    <div>
      <div class="eyebrow">Auswertungen</div>
      <h1>Kosten, Kategorien und Zuordnung</h1>
      <p class="muted">Alle Diagramme beziehen sich auf den aktuellen Monat {{ month.label }}.</p>
    </div>
  </section>

  <section class="chart-grid analytics-grid">
    <article class="panel">
      <div class="panel-head">
        <div>
          <h2 id="category-chart-title">Kategorien im Monat</h2>
          <small id="category-chart-subtitle">Tippe auf einen Bereich, um die Untereinträge im selben Diagramm zu sehen.</small>
        </div>
        <button id="category-chart-back" class="ghost-button small-button" type="button" hidden>Zurück</button>
      </div>
      <div class="chart-shell">
        <canvas
          id="category-chart"
          class="chart"
          data-chart-type="pie"
          data-drilldown-source="true"
          data-labels='{{ category_labels|tojson }}'
          data-values='{{ category_values|tojson }}'
          data-detail-keys='{{ category_keys|tojson }}'
          data-detail-map='{{ category_entry_map|tojson }}'
          data-detail-title-target="category-chart-title"
          data-detail-subtitle-target="category-chart-subtitle"
          data-detail-back-target="category-chart-back"
          data-default-detail-key='{{ default_category_id }}'></canvas>
      </div>
      <script type="application/json" id="category-chart-root-title">{"title":"Kategorien im Monat","subtitle":"Tippe auf einen Bereich, um die Untereinträge im selben Diagramm zu sehen."}</script>
    </article>

    <article class="panel">
      <div class="panel-head">
        <div>
          <h2>Kosten nach Zuordnung</h2>
          <small>Welche Ausgaben welchen registrierten Nutzern zugeordnet sind.</small>
        </div>
      </div>
      <div class="chart-shell">
        <canvas
          class="chart"
          data-chart-type="bar"
          data-labels='{{ benefit_labels|tojson }}'
          data-values='{{ benefit_values|tojson }}'></canvas>
      </div>
    </article>

    <article class="panel">
      <div class="panel-head">
        <div>
          <h2>Kosten nach Hauptbereichen</h2>
          <small>Hilft beim schnellen Blick auf Gemeinschaft, Sparen, Freizeit und persönliche Auszahlung.</small>
        </div>
      </div>
      <div class="chart-shell">
        <canvas
          class="chart"
          data-chart-type="bar"
          data-index-axis="y"
          data-labels='{{ account_labels|tojson }}'
          data-values='{{ account_values|tojson }}'></canvas>
      </div>
    </article>

    <article class="panel analytics-wide-panel">
      <div class="panel-head">
        <div>
          <h2>Budgets im Monatsverlauf</h2>
          <small>Zeigt, wie sich die einzelnen Budgetbereiche von Monat zu Monat entwickeln.</small>
        </div>
      </div>
      <div class="chart-shell chart-shell-tall">
        <canvas
          class="chart"
          data-chart-type="line"
          data-labels='{{ budget_timeline_labels|tojson }}'
          data-datasets='{{ budget_timeline_datasets|tojson }}'></canvas>
      </div>
    </article>

    <article class="panel analytics-wide-panel">
      <div class="panel-head">
        <div>
          <h2>Größte Einträge im Monat</h2>
          <small>Die teuersten Positionen über alle Kategorien hinweg.</small>
        </div>
      </div>
      <div class="chart-shell chart-shell-tall">
        <canvas
          class="chart"
          data-chart-type="bar"
          data-index-axis="y"
          data-labels='{{ top_entry_labels|tojson }}'
          data-values='{{ top_entry_values|tojson }}'></canvas>
      </div>
    </article>
  </section>
{% endblock %}