{{define "users_table"}}
{{ $p := .PageData }}
<table style="width:100%;border-collapse:collapse;margin-top:16px;">
  <thead>
    <tr>
      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
        <a href="#" hx-get="/users/table?q={{$p.Q}}&sort=id&dir={{if and (eq $p.Sort "id") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">ID</a>
      </th>
      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
        <a href="#" hx-get="/users/table?q={{$p.Q}}&sort=name&dir={{if and (eq $p.Sort "name") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Name</a>
      </th>
      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
        <a href="#" hx-get="/users/table?q={{$p.Q}}&sort=email&dir={{if and (eq $p.Sort "email") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Email</a>
      </th>
      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">Role</th>
      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">Azioni</th>
    </tr>
  </thead>
  <tbody>
    {{range $u := $p.Users}}
    <tr>
      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.ID}}</td>
      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{if $u.Name}}{{$u.Name}}{{else}}-{{end}}</td>
      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.Email}}</td>
      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.Role}}</td>
      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">
        <button
          hx-get="/users/{{$u.ID}}/modal"
          hx-target="#userModal"
          hx-swap="innerHTML"
          hx-on::after-request="document.getElementById('userModal').setAttribute('open','')"
        >Apri</button>
      </td>
    </tr>
    {{else}}
    <tr><td colspan="5" style="padding:12px;">Nessun utente trovato.</td></tr>
    {{end}}
  </tbody>
</table>

<div class="row" style="margin-top:12px;align-items:center;justify-content:space-between;">
  <div class="muted">Totale: {{$p.Total}} utenti. Pagina {{$p.Page}}{{if gt $p.TotalPages 0}} / {{$p.TotalPages}}{{end}}</div>
  <div class="row">
    <button {{if not $p.HasPrev}}disabled{{end}} hx-get="/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.PrevPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Prev</button>
    <button {{if not $p.HasNext}}disabled{{end}} hx-get="/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.NextPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Next</button>
  </div>
</div>
{{end}}