{{template "base_header" .}}
{{$admin := .AdminUsers}}
<div class="page">
  {{if .ShowTopbar}}
    {{template "tabler_navbar" .}}
  {{end}}

  <div class="page-wrapper">
    {{if .PageHeader}}
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            {{if .PagePretitle}}
            <div class="page-pretitle">
              {{.PagePretitle}}
            </div>
            {{end}}
            <h1 class="page-title">
              {{.PageHeader}}
            </h1>
          </div>
          <div class="col-auto ms-auto d-print-none">
            <div class="btn-list">
              <a href="{{$admin.AddLink}}" class="btn btn-primary d-none d-sm-inline-block">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
                Create new user
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{end}}

    <div class="page-body">
      <div class="container-xl">
        <div class="card">
          <div class="table-responsive">
            <table class="table table-vcenter card-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Status</th>
                  <th>Roles</th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody>
                {{range $admin.Users}}
                <tr>
                  <td>
                    <div class="d-flex py-1 align-items-center">
                      <span class="avatar avatar-sm me-2" style="background-image: url(/static/avatars/{{.Name | truncate 3}}.jpg)"></span>
                      <div class="flex-fill">
                        <div class="font-weight-medium">{{.Name}}</div>
                      </div>
                    </div>
                  </td>
                  <td class="text-secondary">{{.Email}}</td>
                  <td>
                    {{if eq .Status "Active"}}
                    <span class="status-dot status-dot-animated bg-green"></span>
                    {{else if eq .Status "Inactive"}}
                    <span class="status-dot bg-muted"></span>
                    {{else if eq .Status "Invited"}}
                    <span class="status-dot bg-blue"></span>
                    {{end}}
                    {{.Status}}
                  </td>
                  <td>
                    <div class="row g-1">
                      {{range split ", " .Roles}}
                      <div class="col-auto">
                        <span class="badge bg-blue-lt text-uppercase">{{.}}</span>
                      </div>
                      {{end}}
                    </div>
                  </td>
                  <td>
                    <a href="{{.EditLink}}" class="btn btn-ghost btn-sm">Edit</a>
                  </td>
                </tr>
                {{end}}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {{template "tabler_footer" .}}
  </div>
</div>
{{template "base_footer" .}}