{{define "panel_asset"}}
<div class="panel-content p-3" data-asset-id="{{.Asset.ID}}">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="#" class="breadcrumb-link" data-type="root">Inventory</a></li>
      {{range .Asset.FolderPath}}
      <li class="breadcrumb-item"><a href="#" class="breadcrumb-link" data-type="folder" data-id="{{.ID}}">{{.Name}}</a></li>
      {{end}}
      <li class="breadcrumb-item active" aria-current="page">{{.Asset.Name}}</li>
    </ol>
  </nav>

  <div class="d-flex align-items-center gap-2 mb-3 mt-2" data-context="asset-header" data-id="{{.Asset.ID}}" title="Right-click for actions">
    <i class="bi {{iconOr .Asset.ItemTypeIcon "bi-box-seam"}} fs-3 text-body-secondary"></i>
    <div>
      <h4 class="mb-0">{{.Asset.Name}}</h4>
      <div class="text-body-secondary">{{.Asset.AssetTag}} &middot; {{.Asset.ItemTypeName}}</div>
    </div>
    <span class="badge text-bg-{{.Asset.StatusColor}} ms-2 fs-6">{{.Asset.StatusName}}</span>
  </div>

  <div class="row g-3">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header py-2 fw-semibold">Details</div>
        <table class="table table-sm mb-0">
          <tbody>
            <tr><th class="w-25">Assigned User</th><td>{{if .Asset.AssignedUsername}}{{.Asset.AssignedUsername}}{{else}}<span class="text-body-secondary">Unassigned &mdash; right-click above to check out</span>{{end}}</td></tr>
            {{if not .Asset.ItemTypeIsUnique}}
            <tr>
              <th>Quantity</th>
              <td>
                <div class="input-group input-group-sm" style="max-width: 150px" data-quantity-stepper data-asset-id="{{.Asset.ID}}">
                  <button class="btn btn-outline-secondary" type="button" data-action="panel-quantity-step" data-step="-1">&minus;</button>
                  <span class="form-control text-center" data-quantity-value>{{.Asset.Quantity}}</span>
                  <button class="btn btn-outline-secondary" type="button" data-action="panel-quantity-step" data-step="1">+</button>
                </div>
              </td>
            </tr>
            {{end}}
            <tr><th>Created</th><td>{{fmtDate .Asset.CreatedAt}}</td></tr>
            <tr><th>Updated</th><td>{{fmtDate .Asset.UpdatedAt}}</td></tr>
          </tbody>
        </table>
      </div>
      {{if .Asset.Notes}}
      <div class="card mb-3">
        <div class="card-header py-2 fw-semibold">Notes</div>
        <div class="card-body py-2" style="white-space:pre-wrap">{{.Asset.Notes}}</div>
      </div>
      {{end}}
    </div>
    <div class="col-md-6">
      {{if .Asset.CustomFields}}
      <div class="card mb-3">
        <div class="card-header py-2 fw-semibold">{{.Asset.ItemTypeName}} Fields</div>
        <table class="table table-sm mb-0">
          <tbody>
            {{range .Asset.CustomFields}}
            <tr>
              <th class="w-40">{{.Def.Name}}</th>
              <td>
                {{if eq .Def.FieldType "boolean"}}
                  {{if eq .Value "true"}}<i class="bi bi-check-circle-fill text-success"></i>{{else}}<i class="bi bi-x-circle text-body-secondary"></i>{{end}}
                {{else if eq .Def.FieldType "url"}}
                  {{if .Value}}<a href="{{.Value}}" target="_blank" rel="noopener">{{.Value}}</a>{{end}}
                {{else}}
                  {{if .Value}}{{.Value}}{{else}}<span class="text-body-secondary">&mdash;</span>{{end}}
                {{end}}
              </td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
      {{end}}
    </div>
  </div>
</div>
{{end}}