{% load static %}

<style>
  :root {
    --tag-badge-bg: #d64545;
    --tag-navy: #16243f;
  }

  .rt-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .rt-toolbar .rt-group { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #333; }
  .rt-toolbar label { margin: 0; font-weight: 600; color: var(--tag-navy); }
  .rt-toolbar input[type="number"] { width: 58px; padding: 3px 5px; font-size: 12px; }
  .rt-toolbar .rt-design-btn {
    padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--tag-navy);
    background: #fff; color: var(--tag-navy); border-radius: 5px; cursor: pointer;
  }
  .rt-toolbar .rt-design-btn.active { background: var(--tag-navy); color: #fff; }
  .rt-toolbar .rt-print-btn {
    margin-left: auto; padding: 7px 16px; font-size: 13px; font-weight: 700;
    background: var(--tag-navy); color: #fff; border: none; border-radius: 6px; cursor: pointer;
  }
  .rt-toolbar .rt-count { font-size: 13px; font-weight: 700; color: var(--tag-navy); }

  @media print { .no-print { display: none !important; } }

  /* ── Rack Tag base structure (shared across all 3 designs) ── */
  .rack-tag {
    display: grid;
    position: relative;
    box-sizing: border-box;
    background: #fff;
  }
  .tag-code { grid-area: code; letter-spacing: .3px; font-weight: 600; font-size: var(--fs-code, 9px); }
  .tag-name { grid-area: name; font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; font-size: var(--fs-name, 12px); line-height: 1.05; }
  .tag-price-wrap { grid-area: price; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-price, 11px); }
  .tag-price-original { text-decoration: line-through; color: #888; font-weight: 500; font-size: 0.82em; }
  .tag-price-off { font-weight: 800; color: var(--tag-navy); }
  .tag-badge {
    background: var(--tag-badge-bg); color: #fff; font-weight: 700; line-height: 1;
    padding: 2px 6px; border-radius: 3px; font-size: var(--fs-offprice, 9px); white-space: nowrap;
  }

  body.hide-code .tag-code { display: none; }
  body.hide-name .tag-name { display: none; }
  body.hide-price .tag-price-wrap { display: none; }
  body.hide-offprice .tag-badge { display: none; }

  /* ── Design 1: Classic Centered ── */
  body.design-1 .rack-tag {
    border: 1.5px solid var(--tag-navy);
    grid-template-areas: "code" "name" "price";
    grid-template-rows: auto 1fr auto;
    justify-items: center; align-content: center; text-align: center;
    padding: 6%; row-gap: 4%;
  }
  body.design-1 .tag-price-wrap { justify-content: center; }
  body.design-1 .tag-badge { position: absolute; top: 3%; right: 3%; }

  /* ── Design 2: Split Accent ── */
  body.design-2 .rack-tag {
    border: 1px solid #ddd; border-left: 6px solid var(--tag-navy);
    grid-template-columns: 1fr auto;
    grid-template-areas: "code price" "name price";
    align-items: center; padding: 5% 6%; column-gap: 4%;
  }
  body.design-2 .tag-name { align-self: start; text-align: left; }
  body.design-2 .tag-code { text-align: left; }
  body.design-2 .tag-price-wrap { flex-direction: column; align-items: flex-end; justify-self: end; }
  body.design-2 .tag-badge { position: absolute; top: 3%; left: 3%; }

  /* ── Design 3: Compact Minimal ── */
  body.design-3 .rack-tag {
    border: 1px dashed #bbb;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name name" "code price";
    align-content: space-between; padding: 5%; row-gap: 3%;
  }
  body.design-3 .tag-name { border-bottom: 1px solid #ccc; padding-bottom: 4%; text-align: left; }
  body.design-3 .tag-code { align-self: end; text-align: left; }
  body.design-3 .tag-price-wrap { justify-self: end; align-self: end; }
  body.design-3 .tag-badge { position: static; margin-right: 5px; }
</style>

<div class="rt-toolbar no-print">
  <div class="rt-group"><label>Code</label><input type="checkbox" id="tbShowCode" {% if show_code %}checked{% endif %}><input type="number" id="tbFsCode" value="{{ fs_code }}"></div>
  <div class="rt-group"><label>Name</label><input type="checkbox" id="tbShowName" {% if show_name %}checked{% endif %}><input type="number" id="tbFsName" value="{{ fs_name }}"></div>
  <div class="rt-group"><label>Price</label><input type="checkbox" id="tbShowPrice" {% if show_price %}checked{% endif %}><input type="number" id="tbFsPrice" value="{{ fs_price }}"></div>
  <div class="rt-group"><label>Off Badge</label><input type="checkbox" id="tbShowOffPrice" {% if show_offprice %}checked{% endif %}><input type="number" id="tbFsOffPrice" value="{{ fs_offprice }}"></div>

  <div class="rt-group">
    <label>Design</label>
    <button type="button" class="rt-design-btn {% if design == 1 %}active{% endif %}" data-design="1">1</button>
    <button type="button" class="rt-design-btn {% if design == 2 %}active{% endif %}" data-design="2">2</button>
    <button type="button" class="rt-design-btn {% if design == 3 %}active{% endif %}" data-design="3">3</button>
  </div>

  <div class="rt-count">Total Tags: {{ total_tags }}</div>
  <button type="button" class="rt-print-btn" onclick="window.print()"><i class="fas fa-print mr-1"></i>Print</button>
</div>

<script>
(function () {
  function setVar(name, val) { document.body.style.setProperty(name, val + "px"); }

  document.getElementById("tbFsCode").addEventListener("input", function () { setVar("--fs-code", this.value); });
  document.getElementById("tbFsName").addEventListener("input", function () { setVar("--fs-name", this.value); });
  document.getElementById("tbFsPrice").addEventListener("input", function () { setVar("--fs-price", this.value); });
  document.getElementById("tbFsOffPrice").addEventListener("input", function () { setVar("--fs-offprice", this.value); });

  document.getElementById("tbShowCode").addEventListener("change", function () { document.body.classList.toggle("hide-code", !this.checked); });
  document.getElementById("tbShowName").addEventListener("change", function () { document.body.classList.toggle("hide-name", !this.checked); });
  document.getElementById("tbShowPrice").addEventListener("change", function () { document.body.classList.toggle("hide-price", !this.checked); });
  document.getElementById("tbShowOffPrice").addEventListener("change", function () { document.body.classList.toggle("hide-offprice", !this.checked); });

  document.querySelectorAll(".rt-design-btn").forEach(function (btn) {
    btn.addEventListener("click", function () {
      document.body.classList.remove("design-1", "design-2", "design-3");
      document.body.classList.add("design-" + this.dataset.design);
      document.querySelectorAll(".rt-design-btn").forEach(function (b) { b.classList.remove("active"); });
      this.classList.add("active");
    });
  });
})();
</script>