{% load i18n %}
<div class="card">
  <h5 class="card-header">
    <i class="mdi mdi-label-outline"></i> {% trans "Labels" %}
  </h5>
  <div class="card-body d-flex flex-column gap-3">
    {% for qr_template in qr_templates %}
      <div class="border rounded p-2">
        <a
          href="{% url 'plugins:netbox_labels:qrtemplate' qr_template.pk %}"
          class="d-block text-truncate mb-2"
          title="{{ qr_template.name }}"
        >
          {{ qr_template.name }}
        </a>
        <iframe
          id="netbox-qr-iframe-{{ qr_template.pk }}"
          src="{% url 'plugins:netbox_labels:render_qr' object_type_id object.pk qr_template.pk %}"
          style="display: block; width: 100px; height: 60px; border: 1px solid var(--tblr-border-color, #ccc); background: #fff;"
          loading="lazy"
          scrolling="no"
        ></iframe>
        <div class="mt-2 d-flex align-items-center gap-1 flex-wrap">
          <button
            type="button"
            class="btn btn-sm btn-primary"
            onclick="document.getElementById('netbox-qr-iframe-{{ qr_template.pk }}').contentWindow.print()"
          >
            <i class="mdi mdi-printer"></i> {% trans "Print" %}
          </button>
          {% if show_niimbot_button %}
            <button
              type="button"
              class="btn btn-sm btn-primary"
              data-bs-toggle="modal"
              data-bs-target="#netbox-qr-print-modal"
              onclick="netboxQrPanelSetPrintTarget({{ qr_template.pk }})"
            >
              <i class="mdi mdi-printer-pos"></i> {% trans "Print via…" %}
            </button>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>

{% if show_niimbot_button %}
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="netbox-qr-toast-container" style="z-index: 1090;"></div>

<div class="modal fade" id="netbox-qr-print-modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans "Print via…" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
      </div>
      <div class="modal-body d-flex flex-column gap-2">
        <button type="button" class="btn btn-outline-primary text-start" data-bs-dismiss="modal" onclick="netboxQrPanelPrintLabel('niimbot', 'bluetooth')">
          <i class="mdi mdi-bluetooth"></i> {% trans "Niimbot (Bluetooth)" %}
        </button>
        <button type="button" class="btn btn-outline-primary text-start" data-bs-dismiss="modal" onclick="netboxQrPanelPrintLabel('niimbot', 'serial')">
          <i class="mdi mdi-usb"></i> {% trans "Niimbot (USB)" %}
        </button>
        <button type="button" class="btn btn-outline-primary text-start" data-bs-dismiss="modal" onclick="netboxQrPanelPrintLabel('zpl', 'serial')">
          <i class="mdi mdi-printer-3d"></i> {% trans "Zebra — ZPL (USB)" %}
        </button>
        <button type="button" class="btn btn-outline-primary text-start" data-bs-dismiss="modal" onclick="netboxQrPanelPrintLabel('escpos', 'serial')">
          <i class="mdi mdi-printer"></i> {% trans "Generic — ESC/POS (USB)" %}
        </button>
      </div>
      <div class="modal-footer justify-content-start py-2">
        <a href="https://github.com/N34AY/netbox-labels/issues/new" target="_blank" rel="noopener" class="small">
          <i class="mdi mdi-bug-outline"></i> {% trans "Report a bug / request device support" %}
        </a>
      </div>
    </div>
  </div>
</div>
{% endif %}

<script>
  // Each QR iframe (netbox_labels/render.html) posts its true rendered size on
  // load so it can be shown here at actual physical size, not an arbitrary box.
  // It also posts print errors here, since its own toast would be invisible
  // inside the ~100x60px iframe — this page has real space to show them in.
  window.addEventListener('message', function (event) {
    if (!event.data) {
      return;
    }
    if (event.data.type === 'netbox-qr-size') {
      var iframes = document.querySelectorAll('iframe[id^="netbox-qr-iframe-"]');
      for (var i = 0; i < iframes.length; i++) {
        if (iframes[i].contentWindow === event.source) {
          iframes[i].style.width = event.data.width + 'px';
          iframes[i].style.height = event.data.height + 'px';
          break;
        }
      }
    } else if (event.data.type === 'netbox-qr-print-error') {
      netboxQrShowToast(event.data.message);
    }
  });

  function netboxQrShowToast(message) {
    var container = document.getElementById('netbox-qr-toast-container');
    var toast = document.createElement('div');
    toast.className = 'toast align-items-center text-bg-danger border-0 show';
    toast.setAttribute('role', 'alert');
    toast.innerHTML =
      '<div class="d-flex">' +
      '<div class="toast-body"></div>' +
      '<button type="button" class="btn-close btn-close-white me-2 m-auto" aria-label="{% trans "Close" %}"></button>' +
      '</div>';
    toast.querySelector('.toast-body').textContent = message;
    toast.querySelector('.btn-close').addEventListener('click', function () { toast.remove(); });
    container.appendChild(toast);
    setTimeout(function () { toast.remove(); }, 10000);
  }

  // The print-via modal is shared by every template's button below, so the
  // trigger stashes which one it was opened for here before Bootstrap shows it.
  var netboxQrPanelPrintTargetId = null;

  function netboxQrPanelSetPrintTarget(templateId) {
    netboxQrPanelPrintTargetId = templateId;
  }

  // Delegates into the (same-origin) iframe's own netboxQrPrintLabel(),
  // since the Bluetooth/USB pairing gesture must originate in that document.
  function netboxQrPanelPrintLabel(driver, transport) {
    document.getElementById('netbox-qr-iframe-' + netboxQrPanelPrintTargetId).contentWindow.netboxQrPrintLabel(driver, transport);
  }
</script>