{#
  Répartition / Soldes: solde par compte (all-time + évolution année par
  année), split out of the general dashboard (figli-compta-dashboard.html.twig)
  to keep that one focused on activité/CA/type/client.

  {% verbatim %} below: this is Vue template syntax, not Twig -- both use
  {{ }}, so verbatim tells Twig to leave it alone and let Vue compile it
  in the browser.
#}
<nav class="figli-page-nav">
  <a href="{{ path('figli_compta_ledger.home') }}" class="{{ current_route == 'figli_compta_ledger.home' ? 'is-active' : '' }}">Grand livre</a>
  <a href="{{ path('figli_compta_ledger.dashboard') }}" class="{{ current_route == 'figli_compta_ledger.dashboard' ? 'is-active' : '' }}">SAS</a>
  <a href="{{ path('figli_compta_ledger.dashboard_repartition') }}" class="{{ current_route == 'figli_compta_ledger.dashboard_repartition' ? 'is-active' : '' }}">Répartition/Soldes</a>
  <a href="{{ path('figli_compta_ledger.dashboard_compte') }}" class="{{ current_route == 'figli_compta_ledger.dashboard_compte' ? 'is-active' : '' }}">Par compte</a>
</nav>
{% verbatim %}
<div id="figli-dashboard-app">
  <p v-if="loading">Chargement des données…</p>
  <p v-else-if="error" class="figli-error">Erreur de chargement du tableau de bord : {{ error }}</p>
  <template v-else>
    <section class="figli-chart-section">
      <h2>Solde par compte</h2>
      <p class="figli-note">Solde cumulé de chaque compte depuis l'origine (ouverture comprise) -- vert = créditeur, rouge = débiteur.</p>
      <h-bar-chart :items="soldeParCompteItems" :format-value="formatEurRound"></h-bar-chart>
    </section>

    <section class="figli-chart-section">
      <h2>Évolution du solde par compte</h2>
      <p class="figli-note">Solde de clôture de chaque compte, année par année.</p>
      <div class="figli-trend-grid">
        <div class="figli-trend-card" v-for="compte in comptesOrdonnes" :key="compte">
          <div class="figli-trend-title">{{ compte }}</div>
          <mini-trend :annees="stats.annees" :values="trendValues(compte)" :format-value="formatEurRound"></mini-trend>
        </div>
      </div>
    </section>
  </template>
</div>
{% endverbatim %}