{{define "content"}}
<div class="container-fluid p-3">
  <h4 class="mb-3">Settings</h4>
  <div class="row g-3">
    <div class="col-md-3 col-lg-2">
      {{template "settings_nav" "itemtypes"}}
    </div>
    <div class="col-md-9 col-lg-10">
      <div class="d-flex align-items-center mb-3">
        <h5 class="mb-0">Item Types</h5>
        <a href="/settings/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="/settings/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="/settings/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>
  </div>
</div>
{{end}}