{{define "tabler_table"}}
{{$table := .}}
{{if $table.Title}}
<div class="card-header">
  <h3 class="card-title">{{$table.Title}}</h3>
</div>
{{end}}
<div class="table-responsive">
  <table class="table table-vcenter card-table{{if $table.Striped}} table-striped{{end}}{{if $table.Hover}} table-hover{{end}}">
    <thead>
      <tr>
        {{range $table.Headers}}
        <th{{if .Sort}} data-sort="{{.Sort}}"{{end}}{{if .Width}} class="{{.Width}}"{{end}}{{if .Align}} style="text-align:{{.Align}}"{{end}}>{{.Name}}</th>
        {{end}}
      </tr>
    </thead>
    <tbody>
      {{range $table.Rows}}
      <tr>
        {{range .Cells}}
        <td>
          {{if eq .Type "avatar"}}
          <div class="d-flex py-1 align-items-center">
            <span class="avatar me-2" style="background-image: url(/static/avatars/{{.AvatarID}}.jpg)"></span>
            <div class="flex-fill">
              <div class="font-weight-medium">{{.Value}}</div>
              {{if .Subtext}}<div class="text-secondary"><a href="#" class="text-reset">{{.Subtext}}</a></div>{{end}}
            </div>
          </div>
          {{else if eq .Type "status"}}
          <span class="status-dot {{.StatusColor}}"></span>
          {{.Value}}
          {{else if eq .Type "badge"}}
          <span class="badge {{.BadgeColor}} text-uppercase">{{.Value}}</span>
          {{else if eq .Type "tags"}}
          <div class="row g-1">
            {{range .Tags}}
            <div class="col-auto">
              <span class="badge bg-green-lt text-uppercase">{{.}}</span>
            </div>
            {{end}}
          </div>
          {{else if eq .Type "actions"}}
          <a href="#" 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="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
          </a>
          {{else}}
          {{.Value}}
          {{end}}
        </td>
        {{end}}
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}