{{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; max-width: 100%; }
.label-name { font-size: 8pt; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.label.format-barcode .label-text { text-align: center; }
</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 flex-wrap align-items-center gap-2 ms-auto">
    {{if .AssetIDs}}<input type="hidden" name="asset_ids" value="{{.AssetIDs}}">{{end}}
    {{if .FolderIDs}}<input type="hidden" name="folder_ids" value="{{.FolderIDs}}">{{end}}

    <label class="form-label mb-0 small text-body-secondary" for="labelFormatSelect">Code</label>
    <select class="form-select form-select-sm" id="labelFormatSelect" name="format" onchange="this.form.submit()">
      <option value="qr" {{if eq .Format "qr"}}selected{{end}}>QR code (opens on scan)</option>
      <option value="barcode" {{if eq .Format "barcode"}}selected{{end}}>Barcode (Code128)</option>
    </select>

    <label class="form-label mb-0 small text-body-secondary" for="labelTemplateSelect">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>

    <label class="form-label mb-0 small text-body-secondary" for="labelStartInput">Start at #</label>
    <input type="number" class="form-control form-control-sm" id="labelStartInput" name="start" value="{{.StartPos}}" min="1" style="width: 70px" onchange="this.form.submit()">
  </form>
</div>

<p class="text-body-secondary small px-3 pt-2 mb-0">
  Already used some labels off this sheet? Set "Start at #" to the next free position (counting left-to-right,
  top-to-bottom) instead of wasting them and starting a new sheet.
</p>

{{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 .BlankCells}}<div class="label-blank"></div>{{end}}
  {{range .Labels}}
  <div class="label format-{{$.Format}}">
    <img src="{{.ImageData}}" alt="{{if eq $.Format "barcode"}}Barcode{{else}}QR code{{end}} for {{.Asset.AssetTag}}">
    <div class="min-w-0 label-text">
      <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}}