{{define "content"}}
<div class="container-fluid p-3">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mb-0">Item Types</h4>
    <a href="/item-types/new" class="btn btn-primary btn-sm ms-auto"><i class="bi bi-plus-lg"></i> New Item Type</a>
  </div>
  <div class="table-responsive">
    <table class="table table-hover align-middle">
      <thead><tr><th>Icon</th><th>Name</th><th>Description</th><th>Custom Fields</th><th>Status</th><th></th></tr></thead>
      <tbody>
        {{range .ItemTypes}}
        <tr>
          <td><i class="bi {{iconOr .Icon "bi-box-seam"}} fs-5"></i></td>
          <td><a href="/item-types/{{.ID}}/edit">{{.Name}}</a></td>
          <td class="text-body-secondary">{{.Description}}</td>
          <td>{{len .Fields}}</td>
          <td>{{if .Enabled}}<span class="badge text-bg-success">Enabled</span>{{else}}<span class="badge text-bg-secondary">Disabled</span>{{end}}</td>
          <td class="text-end"><a href="/item-types/{{.ID}}/edit" class="btn btn-sm btn-outline-secondary">Edit</a></td>
        </tr>
        {{else}}
        <tr><td colspan="6" class="text-body-secondary">No item types defined yet.</td></tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>
{{end}}