<% layout('layouts/main') %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content">
    <div class="page-head"><div><p class="eyebrow">Comptabilité suisse</p><h1>Compte de résultat</h1><p class="muted">Produits, charges et résultat de la période.</p></div></div>

    <form method="get" class="panel form-grid two">
      <label>Du<input type="date" name="from" value="<%= period.from %>"></label>
      <label>Au<input type="date" name="to" value="<%= period.to %>"></label>
      <button>Actualiser</button>
    </form>

    <section class="stat-grid">
      <article class="stat"><strong><%= ui.money(report.totalRevenue) %></strong><span>Produits</span></article>
      <article class="stat"><strong><%= ui.money(report.totalExpenses) %></strong><span>Charges</span></article>
      <article class="stat"><strong><%= ui.money(report.result) %></strong><span>Résultat</span></article>
    </section>

    <div class="grid cards">
      <section class="panel">
        <h2>Produits</h2>
        <div class="table-wrap compact-table"><table><thead><tr><th>Compte</th><th>Montant</th></tr></thead><tbody>
          <% report.revenue.forEach(row => { %><tr><td><strong><%= row.code %></strong><br><span class="muted"><%= row.name %></span></td><td><%= ui.money(row.amount) %></td></tr><% }) %>
          <% if (!report.revenue.length) { %><tr><td colspan="2">Aucun produit comptabilisé sur cette période.</td></tr><% } %>
        </tbody></table></div>
      </section>
      <section class="panel">
        <h2>Charges</h2>
        <div class="table-wrap compact-table"><table><thead><tr><th>Compte</th><th>Montant</th></tr></thead><tbody>
          <% report.expenses.forEach(row => { %><tr><td><strong><%= row.code %></strong><br><span class="muted"><%= row.name %></span></td><td><%= ui.money(row.amount) %></td></tr><% }) %>
          <% if (!report.expenses.length) { %><tr><td colspan="2">Aucune charge comptabilisée sur cette période.</td></tr><% } %>
        </tbody></table></div>
      </section>
    </div>
  </section>
</div>
