{{ define "client_consumption.pages.tmpl" }}
{{ template "head" . }}
<div class="columns">
  {{ template "sidebar" . }}
  <div class="column is-10">
    <section class="section">
      <h1 class="title is-4">📊 Statistiques de consommation</h1>

      {{ if eq .User.Role "ADMIN" }}
      <div class="field mb-4">
        <label class="label">👤 Sélectionner un client :</label>
        <div class="control">
          <div class="select is-small">
            <select id="clientSelect" name="client" onchange="location.href='/admin/consumption?client=' + this.value">
              <option value="">Tous les clients</option>
              {{ range .Clients }}
              <option value="{{ .ID }}" {{ if eq $.SelectedClientID .ID }}selected{{ end }}>{{ .Email }}</option>
              {{ end }}
            </select>
          </div>
        </div>
      </div>
      {{ end }}

      <div class="buttons are-small mb-4">
        <a class="button is-info is-light" href="?period=today">📅 Aujourd'hui</a>
        <a class="button is-info is-light" href="?period=week">📆 Cette semaine</a>
        <a class="button is-info is-light" href="?period=month">🗓️ Ce mois</a>
        <a class="button is-info is-light" href="?period=year">📈 Cette année</a>
        <a class="button is-info is-light" href="/admin/consumption">🔁 Tout</a>
      </div>

      <table class="table is-striped is-fullwidth">
        <thead>
          <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Description</th>
            <th>Crédits utilisés</th>
          </tr>
        </thead>
        <tbody>
          {{ range .Consumptions }}
          <tr>
            <td>{{ .CreatedAt.Format "02/01/2006 15:04" }}</td>
            <td>{{ .MessageType }}</td>
            <td>{{ .Description }}</td>
            <td>{{ .CreditsUsed }}</td>
          </tr>
          {{ end }}
        </tbody>
      </table>
    </section>
  </div>
</div>
{{ end }}