{#
  Dashboard shell: Drupal renders the page (nav, auth, permissions).
  dashboard.js (a Vue 3 app) fetches JSON:API and renders everything below,
  client-side. "Ajouter une ligne" opens the real Drupal node form in a
  modal (core/drupal.dialog.ajax) -- no form logic duplicated in JS.

  {% 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>
    <a href="/node/add/ligne_comptable" class="button button--primary" @click.prevent="openAddForm">+ Ajouter une ligne</a>
  </p>
  <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 %}