{{ define "dashboard.pages.tmpl" }}
{{ template "head" . }}

<div class="columns">
  <!-- Sidebar -->
  {{ template "sidebar" . }}
  <!-- Main content -->
  <div class="column is-10">
    <h1 class="title">Tableau de bord</h1>

    <div class="columns is-multiline">
      <div class="column is-4">
        <div class="box has-background-light">
          <p class="title is-5">👥 Total utilisateurs</p>
          <p class="subtitle is-4">{{ .Stats.TotalUsers }}</p>
        </div>
      </div>
      <div class="column is-4">
        <div class="box has-background-light">
          <p class="title is-5">📈 Crédits consommés</p>
          <p class="subtitle is-4">{{ .Stats.TotalCreditsUsed }}</p>
        </div>
      </div>
      <div class="column is-4">
        <div class="box has-background-light">
          <p class="title is-5">💬 Conversations</p>
          <p class="subtitle is-4">{{ .Stats.TotalConversations }}</p>
        </div>
      </div>
    </div>

    <h2 class="title is-5">Dernières conversations</h2>
    <div class="field is-grouped is-grouped-multiline">
      <div class="control">
        <a class="button is-link is-light" href="/dashboard?filter=today">📅 Aujourd'hui</a>
      </div>
      <div class="control">
        <a class="button is-link is-light" href="/dashboard?filter=week">📆 Cette semaine</a>
      </div>
      <div class="control">
        <a class="button is-link is-light" href="/dashboard">🔁 Tout</a>
      </div>
    </div>

    <table class="table is-fullwidth is-striped">
      <thead>
        <tr>
          <th>Date</th>
          <th>De</th>
          <th>À</th>
          <th>Type</th>
          <th>Contenu</th>
        </tr>
      </thead>
      <tbody>
        {{ range .Conversations }}
        <tr>
          <td>{{ .CreatedAt.Format "02/01/2006 15:04" }}</td>
          <td>{{ .From }}</td>
          <td>{{ .To }}</td>
          <td>{{ .Type }}</td>
          <td>{{ .Content }}</td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
</div>
{{ end }}