<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content">
    <div class="page-head"><div><p class="eyebrow">Clôture</p><h1>Périodes comptables</h1><p class="muted">Ouvrez, clôturez ou verrouillez les exercices pour sécuriser les écritures déjà contrôlées.</p></div></div>

    <form method="post" action="<%= adminBase %>/comptabilite/periodes" class="panel form-grid two">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <label>Libellé<input name="label" placeholder="Exercice 2026" required></label>
      <label>Début<input type="date" name="starts_on" required></label>
      <label>Fin<input type="date" name="ends_on" required></label>
      <button>Créer la période</button>
    </form>

    <div class="mobile-list">
      <% periods.forEach(period => { %>
        <article class="list-card">
          <div class="list-card-head"><div><strong><%= period.label %></strong><span><%= ui.date(period.starts_on) %> - <%= ui.date(period.ends_on) %></span></div><span class="badge"><%= ui.label(period.status) %></span></div>
          <form method="post" action="<%= adminBase %>/comptabilite/periodes/<%= period.id %>/statut" class="inline-date-action">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <select name="status">
              <option value="open" <%= period.status === 'open' ? 'selected' : '' %>>Ouverte</option>
              <option value="closed" <%= period.status === 'closed' ? 'selected' : '' %>>Clôturée</option>
              <option value="locked" <%= period.status === 'locked' ? 'selected' : '' %>>Verrouillée</option>
            </select>
            <button class="secondary">Mettre à jour</button>
          </form>
        </article>
      <% }) %>
    </div>
  </section>
</div>
