{#
  Aggregate view: solde par compte / solde par client. 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.
#}
{% 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 v-for="table in tables" :key="table.title">
      <h2>{{ table.title }}</h2>
      <p class="figli-note" v-if="table.note">{{ table.note }}</p>
      <table>
        <thead><tr><th></th><th>Entrées (+)</th><th>Sorties (-)</th><th>Solde</th></tr></thead>
        <tbody>
          <tr v-for="row in table.rows" :key="row.name" :class="rowClass(row.solde)">
            <td>{{ row.name }}</td>
            <td class="amount">{{ formatEur(row.entrees) }}</td>
            <td class="amount">{{ formatEur(row.sorties) }}</td>
            <td class="amount">{{ formatEur(row.solde) }}</td>
          </tr>
          <tr class="total">
            <td>TOTAL</td>
            <td class="amount">{{ formatEur(table.totals.entrees) }}</td>
            <td class="amount">{{ formatEur(table.totals.sorties) }}</td>
            <td class="amount">{{ formatEur(table.totals.solde) }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </template>
</div>
{% endverbatim %}