{#
  Charts and aggregate totals: chiffre d'affaires par année, répartition
  par type, top clients. Solde par compte lives on its own page now (see
  figli-compta-dashboard-repartition.html.twig). The spreadsheet-like
  line-by-line view is the site's home page (figli-compta-home.html.twig).

  {% 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>
    <div class="figli-summary-row">
      <div class="figli-summary-card">
        <div class="figli-summary-label">Chiffre d'affaires total</div>
        <div class="figli-summary-value">{{ formatEurRound(totalCA) }}</div>
      </div>
      <div class="figli-summary-card" v-if="caAnneeEnCours">
        <div class="figli-summary-label">CA {{ caAnneeEnCours.annee }}</div>
        <div class="figli-summary-value">{{ formatEurRound(caAnneeEnCours.value) }}</div>
      </div>
    </div>

    <section class="figli-chart-section">
      <h2>Chiffre d'affaires par année</h2>
      <p class="figli-note">Total des entrées client (montant HT) facturées chaque année.</p>
      <column-chart :items="caParAnneeItems" :format-value="formatEurRound"></column-chart>
    </section>

    <section class="figli-chart-section">
      <h2>Répartition de l'activité par type</h2>
      <p class="figli-note">Montant total (HT, valeur absolue) par type de ligne, hors ouvertures.</p>
      <h-bar-chart :items="typeItems" :format-value="formatEurRound" :color-for="typeColor"></h-bar-chart>
      <div class="figli-year-hbar-grid">
        <div class="figli-year-hbar-card" v-for="y in typeItemsParAnnee" :key="y.annee">
          <div class="figli-year-hbar-title">{{ y.annee }}</div>
          <h-bar-chart :items="y.items" :format-value="formatEurRound" :color-for="typeColor" compact></h-bar-chart>
        </div>
      </div>
    </section>

    <section class="figli-chart-section">
      <h2>Top clients par chiffre d'affaires</h2>
      <p class="figli-note">Les 12 clients ayant généré le plus de chiffre d'affaires, toutes années confondues.</p>
      <h-bar-chart :items="topClientsItems" :format-value="formatEurRound"></h-bar-chart>
      <div class="figli-year-hbar-grid">
        <div class="figli-year-hbar-card" v-for="y in topClientsParAnnee" :key="y.annee">
          <div class="figli-year-hbar-title">{{ y.annee }}</div>
          <h-bar-chart :items="y.items" :format-value="formatEurRound" compact></h-bar-chart>
        </div>
      </div>
    </section>

    <section class="figli-chart-section">
      <h2>Charges structurelles par client</h2>
      <p class="figli-note">Montant total (HT, valeur absolue) des charges structurelles par vendeur/organisme, toutes années confondues.</p>
      <h-bar-chart :items="chargeParClientItems" :format-value="formatEurRound" :color-for="typeColor"></h-bar-chart>
      <div class="figli-chart-total">Total : {{ formatEurRound(sumItems(chargeParClientItems)) }}</div>
      <div class="figli-year-hbar-grid">
        <div class="figli-year-hbar-card" v-for="y in chargeParClientParAnnee" :key="y.annee">
          <div class="figli-year-hbar-title">{{ y.annee }}</div>
          <h-bar-chart :items="y.items" :format-value="formatEurRound" :color-for="typeColor" compact></h-bar-chart>
          <div class="figli-chart-total is-compact">Total : {{ formatEurRound(sumItems(y.items)) }}</div>
        </div>
      </div>
    </section>

    <section class="figli-chart-section">
      <h2>Total des versements par compte</h2>
      <p class="figli-note">Montant total versé à chaque compte associé, plus les salaires/stages et sous-traitants, toutes années confondues.</p>
      <h-bar-chart :items="versementsParCompteItems" :format-value="formatEurRound" :color-for="typeColor"></h-bar-chart>
      <div class="figli-year-hbar-grid">
        <div class="figli-year-hbar-card" v-for="y in versementsParCompteParAnnee" :key="y.annee">
          <div class="figli-year-hbar-title">{{ y.annee }}</div>
          <h-bar-chart :items="y.items" :format-value="formatEurRound" :color-for="typeColor" compact></h-bar-chart>
        </div>
      </div>
    </section>
  </template>
</div>
{% endverbatim %}