{{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" style="max-width: 900px">
  <div class="d-flex align-items-center mb-3">
    <h5 class="mb-0">{{if .ItemType}}Edit Item Type{{else}}New Item Type{{end}}</h5>
    <a href="/settings/item-types" class="btn btn-sm btn-outline-secondary ms-auto">Back to Item Types</a>
  </div>

  {{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}

  <div class="card mb-4">
    <div class="card-body">
      <form method="post" action="{{if .ItemType}}/settings/item-types/{{.ItemType.ID}}{{else}}/settings/item-types{{end}}">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" value="{{if .ItemType}}{{.ItemType.Name}}{{end}}" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Icon</label>
            <div class="icon-picker" data-icon-picker>
              <input type="hidden" name="icon" value="{{if .ItemType}}{{.ItemType.Icon}}{{end}}">
              <button type="button" class="btn btn-outline-secondary icon-picker-toggle w-100">
                <i class="bi icon-picker-preview"></i>
                <span class="icon-picker-label text-body-secondary">Choose icon&hellip;</span>
                <i class="bi bi-chevron-down icon-picker-caret"></i>
              </button>
              <div class="icon-picker-menu">
                <input type="search" class="form-control form-control-sm icon-picker-search" placeholder="Search icons&hellip;">
                <div class="icon-picker-grid"></div>
                <button type="button" class="btn btn-sm btn-link p-0 mt-2 icon-picker-clear">Clear</button>
              </div>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">Description</label>
            <textarea class="form-control" name="description" rows="2">{{if .ItemType}}{{.ItemType.Description}}{{end}}</textarea>
          </div>
          <div class="col-md-3">
            <label class="form-label">Sort Order</label>
            <input type="number" class="form-control" name="sort_order" value="{{if .ItemType}}{{.ItemType.SortOrder}}{{else}}0{{end}}">
          </div>
          <div class="col-md-3 d-flex align-items-end">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="enabled" id="enabled" {{if .ItemType}}{{if .ItemType.Enabled}}checked{{end}}{{else}}checked{{end}}>
              <label class="form-check-label" for="enabled">Enabled</label>
            </div>
          </div>
          <div class="col-12">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="is_unique" id="isUnique" {{if .ItemType}}{{if .ItemType.IsUnique}}checked{{end}}{{else}}checked{{end}}>
              <label class="form-check-label" for="isUnique">
                Unique &mdash; each asset of this type has its own identity (e.g. a laptop's serial number)
              </label>
            </div>
            <div class="form-text">
              Uncheck this for bulk/consumable types (e.g. a USB-A cable) that are tracked as one row
              with a quantity instead of one row per unit.
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3">Save</button>
        {{if .ItemType}}
        <button type="submit" formaction="/settings/item-types/{{.ItemType.ID}}/delete" class="btn btn-outline-danger mt-3" onclick="return confirm('Delete this item type? This is only possible if no assets use it.')">Delete Item Type</button>
        {{end}}
      </form>
    </div>
  </div>

  {{if .ItemType}}
  <h5 class="mb-2">Custom Fields</h5>
  <div class="card mb-4">
    <div class="table-responsive">
      <table class="table mb-0 align-middle">
        <thead><tr><th>Name</th><th>Key</th><th>Type</th><th>Required</th><th>Default</th><th>Options</th><th>Order</th><th></th></tr></thead>
        <tbody>
          {{range .ItemType.Fields}}
          <tr>
            <td>{{.Name}}</td>
            <td><code>{{.FieldKey}}</code></td>
            <td>{{.FieldType.Label}}</td>
            <td>{{if .Required}}<i class="bi bi-check-lg text-success"></i>{{end}}</td>
            <td>{{.DefaultValue}}</td>
            <td class="text-body-secondary small">{{range .Options}}{{.}}<br>{{end}}</td>
            <td>{{.SortOrder}}</td>
            <td class="text-nowrap">
              <button type="button" class="btn btn-sm btn-outline-secondary field-edit-btn"
                data-id="{{.ID}}" data-name="{{.Name}}" data-type="{{.FieldType}}"
                data-required="{{.Required}}" data-default="{{.DefaultValue}}"
                data-options="{{range $i, $o := .Options}}{{if $i}}&#10;{{end}}{{$o}}{{end}}" data-sort-order="{{.SortOrder}}">
                Edit
              </button>
              <form method="post" action="/settings/item-types/{{$.ItemType.ID}}/fields/{{.ID}}/delete" class="d-inline" onsubmit="return confirm('Delete this field? Existing values will be lost.')">
                <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
              </form>
            </td>
          </tr>
          {{end}}
          {{if not .ItemType.Fields}}
          <tr><td colspan="8" class="text-body-secondary">No custom fields yet.</td></tr>
          {{end}}
        </tbody>
      </table>
    </div>
    <div class="card-body border-top">
      <h6 id="fieldFormTitle">Add Field</h6>
      <form method="post" action="/settings/item-types/{{.ItemType.ID}}/fields" id="fieldForm" class="row g-2 align-items-end">
        <div class="col-md-3">
          <label class="form-label small mb-1">Name</label>
          <input type="text" class="form-control form-control-sm" name="name" id="fieldFormName" required>
        </div>
        <div class="col-md-2">
          <label class="form-label small mb-1">Type</label>
          <select class="form-select form-select-sm" name="field_type" id="fieldFormType">
            {{range .FieldTypes}}<option value="{{.}}">{{.Label}}</option>{{end}}
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label small mb-1">Default Value</label>
          <input type="text" class="form-control form-control-sm" name="default_value" id="fieldFormDefault">
        </div>
        <div class="col-md-3">
          <label class="form-label small mb-1">Dropdown Options <span class="text-body-secondary">(one per line)</span></label>
          <textarea class="form-control form-control-sm" name="options" id="fieldFormOptions" rows="1"></textarea>
        </div>
        <div class="col-md-1">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="required" id="fieldFormRequired">
            <label class="form-check-label small" for="fieldFormRequired">Required</label>
          </div>
        </div>
        <div class="col-md-1">
          <button type="submit" class="btn btn-sm btn-primary w-100" id="fieldFormSubmit">Add</button>
        </div>
        <input type="hidden" name="sort_order" id="fieldFormSortOrder" value="0">
      </form>
      <button type="button" class="btn btn-sm btn-link d-none" id="fieldFormCancel">Cancel edit</button>
    </div>
  </div>
  <script>window.itemTypeFieldsBaseAction = "/settings/item-types/{{.ItemType.ID}}/fields";</script>
  {{else}}
  <p class="text-body-secondary">Save the item type first to add custom fields.</p>
  {{end}}
    </div>
  </div>
</div>
{{end}}