vibetree/web/templates/partials/panel_asset.html

{{define "panel_asset"}}
<div class="panel-content p-3" data-asset-id="{{.Asset.ID}}">
  <div class="d-flex align-items-start mb-2">
    <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>
    {{if .CanEdit}}
    <div class="ms-auto d-flex gap-2">
      <button class="btn btn-sm btn-outline-secondary" data-action="edit-asset" data-id="{{.Asset.ID}}"><i class="bi bi-pencil"></i> Edit</button>
      <button class="btn btn-sm btn-outline-secondary" data-action="move-asset" data-bs-toggle="modal" data-bs-target="#moveAssetModal-{{.Asset.ID}}"><i class="bi bi-arrows-move"></i> Move</button>
      <button class="btn btn-sm btn-outline-secondary" data-action="duplicate-asset" data-id="{{.Asset.ID}}"><i class="bi bi-files"></i> Duplicate</button>
      <button class="btn btn-sm btn-outline-danger" data-action="delete-asset" data-id="{{.Asset.ID}}" data-name="{{.Asset.Name}}"><i class="bi bi-trash"></i> Delete</button>
    </div>
    {{end}}
  </div>

  <div class="d-flex align-items-center gap-2 mb-3">
    <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</span>{{end}}</td></tr>
            <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>

{{if .CanEdit}}
<div class="modal fade" id="moveAssetModal-{{.Asset.ID}}" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Move "{{.Asset.Name}}"</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <label class="form-label">Destination Folder</label>
        <select class="form-select" id="moveAssetDestination-{{.Asset.ID}}">
          <option value="">Inventory (top level)</option>
          {{range .FolderOptions}}
          <option value="{{.ID}}">{{range seq .Depth}}&nbsp;&nbsp;&nbsp;{{end}}{{.Path}}</option>
          {{end}}
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" data-action="confirm-move-asset" data-id="{{.Asset.ID}}" data-select="moveAssetDestination-{{.Asset.ID}}">Move</button>
      </div>
    </div>
  </div>
</div>
{{end}}
{{end}}