{{template "base_header" .}}
{{$admin := .AdminCustomers}}
<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="#" 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>
                Add customer
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{end}}

    <div class="page-body">
      <div class="container-xl">
        <div class="card">
          <div class="card-header">
            <div class="row w-full">
              <div class="col">
                <h3 class="card-title mb-0">Customers</h3>
                <p class="text-secondary m-0">Manage your customer relationships.</p>
              </div>
              <div class="col-md-auto col-sm-12">
                <div class="ms-auto d-flex flex-wrap btn-list">
                  <div class="input-group input-group-flat w-auto">
                    <span class="input-group-text">
                      <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
                    </span>
                    <input type="text" class="form-control" placeholder="Search customers…">
                  </div>
                  <a href="#" class="btn btn-icon" aria-label="More options">
                    <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="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-vcenter card-table">
              <thead>
                <tr>
                  <th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all"></th>
                  <th>Name</th>
                  <th>Location</th>
                  <th>Status</th>
                  <th>Start date</th>
                  <th>Tags</th>
                  <th>Department</th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody>
                {{range $i, $customer := $admin.Customers}}
                <tr>
                  <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select customer {{$i}}"></td>
                  <td>
                    <div class="d-flex py-1 align-items-center">
                      <span class="avatar avatar-sm me-2" style="background-image: url(/static/avatars/{{.AvatarID}}.jpg)"></span>
                      <div class="flex-fill">
                        <div class="font-weight-medium">{{.FullName}}</div>
                        <div class="text-secondary"><a href="#" class="text-reset">{{.Email}}</a></div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div>{{.City}}</div>
                    <div class="text-secondary">{{.Country}}</div>
                  </td>
                  <td>
                    {{if eq .Status "VIP"}}
                    <span class="badge bg-blue-lt text-uppercase">{{.Status}}</span>
                    {{else if eq .Status "New"}}
                    <span class="badge bg-green-lt text-uppercase">{{.Status}}</span>
                    {{else}}
                    <span class="badge bg-muted-lt text-uppercase">{{.Status}}</span>
                    {{end}}
                  </td>
                  <td class="text-secondary">{{.Date}}</td>
                  <td>
                    <div class="row g-1">
                      {{range .Tags}}
                      <div class="col-auto">
                        <span class="badge bg-green-lt text-uppercase">{{.}}</span>
                      </div>
                      {{end}}
                    </div>
                  </td>
                  <td>
                    <span class="badge bg-muted-lt text-uppercase">{{.Department}}</span>
                  </td>
                  <td>
                    <div class="btn-list flex-nowrap">
                      <a href="#" class="btn btn-ghost btn-sm">Edit</a>
                      <div class="dropdown">
                        <button class="btn btn-ghost btn-icon btn-sm" data-bs-toggle="dropdown">
                          <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="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
                        </button>
                        <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">Edit</a>
                          <a class="dropdown-item" href="#">Duplicate</a>
                          <a class="dropdown-item text-danger" href="#">Delete</a>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
                {{end}}
              </tbody>
            </table>
          </div>

          <div class="card-footer d-flex align-items-center">
            <div class="dropdown">
              <a class="btn dropdown-toggle" data-bs-toggle="dropdown">
                <span class="me-1">20</span>
                <span>records</span>
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item">10 records</a>
                <a class="dropdown-item active">20 records</a>
                <a class="dropdown-item">50 records</a>
                <a class="dropdown-item">100 records</a>
              </div>
            </div>
            <ul class="pagination ms-auto mb-0">
              <li class="page-item disabled"><a class="page-link">‹</a></li>
              <li class="page-item active"><a class="page-link">1</a></li>
              <li class="page-item"><a class="page-link">2</a></li>
              <li class="page-item"><a class="page-link">3</a></li>
              <li class="page-item"><a class="page-link">4</a></li>
              <li class="page-item"><a class="page-link">5</a></li>
              <li class="page-item"><a class="page-link">›</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

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