{{define "content"}}
<style>{{.SheetCSS}}
@media print {
  .app-navbar, .print-toolbar { display: none !important; }
  body { margin: 0; background: #fff; }
  .label-sheet { margin: 0; }
}
.label-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 11pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-name { font-size: 8pt; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

<div class="print-toolbar d-flex flex-wrap align-items-center gap-3 p-3 border-bottom">
  <button class="btn btn-primary" onclick="window.print()"><i class="bi bi-printer"></i> Print</button>
  <span class="text-body-secondary">{{len .Labels}} label(s)</span>
  <form method="get" class="d-flex align-items-center gap-2 ms-auto">
    {{if .AssetID}}<input type="hidden" name="asset_id" value="{{.AssetID}}">{{end}}
    {{if .FolderID}}<input type="hidden" name="folder_id" value="{{.FolderID}}">{{end}}
    {{if .Recursive}}<input type="hidden" name="recursive" value="1">{{end}}
    <label class="form-label mb-0 small text-body-secondary" for="labelTemplateSelect">Label sheet</label>
    <select class="form-select form-select-sm" id="labelTemplateSelect" name="template" onchange="this.form.submit()">
      {{range $key := .TemplateKeys}}
      {{$t := index $.Templates $key}}
      <option value="{{$key}}" {{if eq $key $.Selected.Key}}selected{{end}}>{{$t.DisplayName}}</option>
      {{end}}
    </select>
  </form>
</div>

{{if .Selected.Approximate}}
<div class="alert alert-warning m-3">
  This layout's grid/margins aren't from a verified spec sheet - print one test page on plain paper and
  hold it up to a real label sheet before printing a full (often waterproof, non-refundable) sheet.
</div>
{{end}}

<div class="label-sheet">
  {{range .Labels}}
  <div class="label">
    <img src="{{.QRData}}" alt="QR code for {{.Asset.AssetTag}}">
    <div class="min-w-0">
      <div class="label-tag">{{.Asset.AssetTag}}</div>
      <div class="label-name">{{.Asset.Name}}</div>
    </div>
  </div>
  {{end}}
</div>
{{if not .Labels}}
<p class="text-body-secondary p-3">No assets to print.</p>
{{end}}
{{end}}