{% extends 'base/layout.html' %}
{% load static %}
{% load helpers %}
{% load tabs %}
{% load i18n %}

{% block title %}{% trans "Design" %} — {{ object.name }}{% endblock %}

{% block header %}
  <div class="page-header m-0">
    <div class="container-fluid mt-2 d-print-none">
      <h1 class="page-title">{% trans "Design" %}: {{ object.name }}</h1>
    </div>
    <div class="page-tabs mt-3">
      <div class="container-fluid">
        <ul class="nav nav-tabs" role="presentation">
          {# Primary tab #}
          <li class="nav-item">
            <a class="nav-link" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
          </li>

          {# Visual designer (this page) #}
          <li class="nav-item">
            <a class="nav-link active" href="{% url 'plugins:netbox_labels:qrtemplate_design' object.pk %}">
              <i class="mdi mdi-palette"></i> {% trans "Design" %}
            </a>
          </li>

          {# Include tabs for registered model views #}
          {% model_view_tabs object %}
        </ul>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
<div
  id="qr-designer"
  {% comment %}
    stringformat:"s" (not plain {{ object.width_mm }}) — Django's default number
    formatting is locale-aware and uses a comma decimal separator for uk (e.g.
    "12,5"), which parseFloat() in qr-designer.js would silently truncate at the
    comma (12,5 -> 12).
  {% endcomment %}
  data-width-mm="{{ object.width_mm|stringformat:'s' }}"
  data-height-mm="{{ object.height_mm|stringformat:'s' }}"
  data-preview-url="{% url 'plugins:netbox_labels:qrtemplate_preview' object.pk %}"
  data-search-url="{% url 'plugins:netbox_labels:qrtemplate_object_search' %}"
  data-docs-url="{% if settings.DOCS_ROOT %}{% static 'docs/models/netbox_labels/qrtemplate/' %}{% endif %}"
>
  <div class="d-flex flex-wrap gap-1 align-items-center mb-3" id="qr-toolbar">
    <div class="btn-group">
      <button type="button" id="qr-undo" class="btn btn-sm btn-outline-secondary" title="{% trans 'Undo' %}" disabled>
        <i class="mdi mdi-undo"></i>
      </button>
      <button type="button" id="qr-redo" class="btn btn-sm btn-outline-secondary" title="{% trans 'Redo' %}" disabled>
        <i class="mdi mdi-redo"></i>
      </button>
    </div>

    <div class="btn-group">
      <button type="button" id="qr-zoom-out" class="btn btn-sm btn-outline-secondary" title="{% trans 'Zoom out' %}">
        <i class="mdi mdi-magnify-minus"></i>
      </button>
      <button type="button" id="qr-zoom-reset" class="btn btn-sm btn-outline-secondary" title="{% trans 'Reset zoom' %}">
        <span id="qr-zoom-label">100%</span>
      </button>
      <button type="button" id="qr-zoom-in" class="btn btn-sm btn-outline-secondary" title="{% trans 'Zoom in' %}">
        <i class="mdi mdi-magnify-plus"></i>
      </button>
    </div>

    <div class="btn-group">
      <button type="button" id="qr-grid-toggle" class="btn btn-sm btn-outline-primary" title="{% trans 'Toggle grid / snap' %}">
        <i class="mdi mdi-grid"></i>
      </button>
      <button type="button" id="qr-grid-size-btn" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" title="{% trans 'Grid size' %}">
        <span id="qr-grid-size-label">5 mm</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item qr-grid-size-option" href="#" data-value="1">1 mm</a></li>
        <li><a class="dropdown-item qr-grid-size-option" href="#" data-value="2">2 mm</a></li>
        <li><a class="dropdown-item qr-grid-size-option active" href="#" data-value="5">5 mm</a></li>
        <li><a class="dropdown-item qr-grid-size-option" href="#" data-value="10">10 mm</a></li>
      </ul>
    </div>

    <div class="btn-group">
      <button type="button" id="qr-ruler-toggle" class="btn btn-sm btn-outline-primary" title="{% trans 'Toggle rulers' %}">
        <i class="mdi mdi-ruler"></i>
      </button>
    </div>

    <div class="dropdown">
      <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
        <i class="mdi mdi-ruler-square"></i> <span id="qr-dims-label">{{ object.width_mm }} × {{ object.height_mm }} mm</span>
      </button>
      <div class="dropdown-menu p-2" style="min-width: 15rem">
        <div class="d-flex gap-2 mb-2">
          <input type="number" id="qr-canvas-width" step="0.1" min="1" class="form-control form-control-sm" placeholder="{% trans 'Width' %}">
          <input type="number" id="qr-canvas-height" step="0.1" min="1" class="form-control form-control-sm" placeholder="{% trans 'Height' %}">
        </div>
        <div class="dropdown-divider"></div>
        {% for preset in size_presets %}
          <a href="#" class="dropdown-item qr-preset" data-w="{{ preset.width_mm|stringformat:'s' }}" data-h="{{ preset.height_mm|stringformat:'s' }}">
            {{ preset.name }} ({{ preset.width_mm }} × {{ preset.height_mm }}mm)
          </a>
        {% empty %}
          <span class="dropdown-item-text text-muted small">{% trans "No presets defined." %}</span>
        {% endfor %}
        <div class="dropdown-divider"></div>
        <a href="{% url 'plugins:netbox_labels:qrsizepreset_list' %}" class="dropdown-item" target="_blank">
          <i class="mdi mdi-pencil"></i> {% trans "Manage presets…" %}
        </a>
      </div>
    </div>

    <div class="dropdown">
      <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
        <i class="mdi mdi-plus-thick"></i> {% trans "Add" %}
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#" id="qr-add-text"><i class="mdi mdi-format-text"></i> {% trans "Text" %}</a></li>
        <li><a class="dropdown-item" href="#" id="qr-add-image"><i class="mdi mdi-image"></i> {% trans "Image" %}</a></li>
        <li><a class="dropdown-item" href="#" id="qr-add-qr"><i class="mdi mdi-qrcode"></i> {% trans "QR Code" %}</a></li>
        <li><a class="dropdown-item" href="#" id="qr-add-barcode"><i class="mdi mdi-barcode"></i> {% trans "Barcode" %}</a></li>
        <li><a class="dropdown-item" href="#" id="qr-add-icon" data-bs-toggle="modal" data-bs-target="#qr-icon-picker-modal"><i class="mdi mdi-shape"></i> {% trans "Icon" %}</a></li>
      </ul>
      <input type="file" id="qr-image-file-input" accept="image/*" class="d-none">
    </div>

    <div class="ms-auto btn-group">
      <button type="button" id="qr-preview-btn" class="btn btn-sm btn-outline-secondary" title="{% trans 'Preview' %}" data-bs-toggle="modal" data-bs-target="#qr-preview-modal">
        <i class="mdi mdi-eye"></i>
      </button>
      <button type="submit" form="qr-save-form" class="btn btn-sm btn-primary" title="{% trans 'Save' %}">
        <i class="mdi mdi-content-save"></i>
      </button>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <div id="qr-canvas-area" class="qr-canvas-area">
        <div id="qr-ruler-corner" class="qr-ruler-corner"></div>
        <canvas id="qr-ruler-top" class="qr-ruler qr-ruler-top"></canvas>
        <canvas id="qr-ruler-left" class="qr-ruler qr-ruler-left"></canvas>
        <div id="qr-canvas-wrapper" style="overflow: auto; border: 1px solid var(--tblr-border-color, #444); padding: 2rem; min-height: 320px; display: flex; align-items: safe center; justify-content: safe center; background: repeating-conic-gradient(#8884 0% 25%, transparent 0% 50%) 50% / 20px 20px; touch-action: none; cursor: grab;">
          <div id="qr-canvas" style="position: relative; background: #fff; flex: none; box-shadow: 0 0 0 1px #0003;"></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <h5 class="card-header">{% trans "Properties" %}</h5>
        <div class="card-body" id="qr-properties-body">
          <p class="text-muted mb-0">{% trans "Select an element to edit its properties." %}</p>
        </div>
      </div>
    </div>
  </div>

  <form method="post" action="{% url 'plugins:netbox_labels:qrtemplate_design' object.pk %}" id="qr-save-form" class="mt-3">
    {% csrf_token %}
    <input type="hidden" name="layout_json" id="qr-layout-json">
    <input type="hidden" name="width_mm" id="qr-width-mm-input">
    <input type="hidden" name="height_mm" id="qr-height-mm-input">
  </form>
</div>

<div class="modal fade" id="qr-preview-modal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans "Preview" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-4 mb-3 mb-lg-0">
            <div class="btn-group w-100 mb-3" role="group">
              <button type="button" class="btn btn-outline-primary active" id="qr-preview-mode-placeholder">
                {% trans "Placeholder" %}
              </button>
              <button type="button" class="btn btn-outline-primary" id="qr-preview-mode-object"{% if not object_type_choices %} disabled{% endif %}>
                {% trans "Real object" %}
              </button>
            </div>
            <div id="qr-preview-object-picker" class="d-none">
              <select id="qr-preview-content-type" class="form-select form-select-sm mb-2">
                {% for ct in object_type_choices %}
                  <option value="{{ ct.pk }}">{{ ct }}</option>
                {% endfor %}
              </select>
              <input type="text" id="qr-preview-search" class="form-control form-control-sm mb-2" placeholder="{% trans 'Search…' %}">
              <div id="qr-preview-results" class="list-group" style="max-height: 320px; overflow: auto;"></div>
            </div>
          </div>
          <div class="col-lg-8">
            <iframe id="qr-preview-iframe" style="width: 100%; height: 60vh; border: 1px solid var(--tblr-border-color, #ccc); background: #fff;"></iframe>
            <div class="mt-2 d-none" id="qr-preview-data-wrapper">
              <button
                type="button"
                class="btn btn-sm btn-outline-secondary"
                data-bs-toggle="collapse"
                data-bs-target="#qr-preview-data-collapse"
                id="qr-preview-data-toggle"
              >
                <i class="mdi mdi-code-json"></i> {% trans "Object data (debug)" %}
              </button>
              <div class="collapse mt-2" id="qr-preview-data-collapse">
                <div class="alert alert-danger d-none netbox-qr-preview-error mb-2" id="qr-preview-error"></div>
                <p class="form-text small">
                  {% blocktrans trimmed %}
                    This is <code>object_data</code>, not <code>object</code> — the object
                    serialized the same way NetBox's REST API would return it, used by
                    <code>${expr}</code> placeholders and custom Jinja2 expressions. It's a
                    different shape than <code>object</code> (the raw model instance): a choice
                    field like <code>object_data.profile.label</code> works here, while the
                    equivalent on <code>object</code> would just be its bare stored value.
                  {% endblocktrans %}
                  {% if settings.DOCS_ROOT %}
                    <a href="{% static 'docs/models/netbox_labels/qrtemplate/' %}#object-vs-object_data" target="_blank" rel="noopener">
                      <i class="mdi mdi-information-outline"></i> {% trans "Documentation" %}
                    </a>
                  {% endif %}
                </p>
                <pre class="netbox-qr-preview-data" id="qr-preview-data-json"></pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="qr-icon-picker-modal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans "Insert icon" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
      </div>
      <div class="modal-body">
        <input type="text" id="qr-icon-search" class="form-control form-control-sm mb-3" placeholder="{% trans 'Search icons…' %}" autocomplete="off">
        <div id="qr-icon-results" class="netbox-qr-icon-results"></div>
        <p class="text-muted small mb-0 d-none" id="qr-icon-more-hint">{% trans "Narrow your search to see more results." %}</p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Rulers are an opt-in overlay around #qr-canvas-wrapper, laid out as a
     2x2 grid (corner / top ruler / left ruler / the wrapper itself) so
     toggling them just changes the two 0-sized tracks to RULER_SIZE_PX
     (kept in sync with qr-designer.js) rather than reflowing anything else. */
  .qr-canvas-area {
    display: grid;
    grid-template-columns: 0 1fr;
    grid-template-rows: 0 1fr;
  }
  .qr-canvas-area.qr-rulers-visible {
    grid-template-columns: 20px 1fr;
    grid-template-rows: 20px 1fr;
  }
  .qr-ruler-corner, .qr-ruler {
    display: none;
  }
  .qr-canvas-area.qr-rulers-visible .qr-ruler-corner,
  .qr-canvas-area.qr-rulers-visible .qr-ruler {
    display: block;
  }
  .qr-ruler-corner {
    background: var(--tblr-bg-surface-secondary, #f8f9fa);
    border: 1px solid var(--tblr-border-color, #444);
    border-right: none;
    border-bottom: none;
  }
  .qr-ruler {
    width: 100%;
    height: 100%;
    background: var(--tblr-bg-surface-secondary, #f8f9fa);
    border: 1px solid var(--tblr-border-color, #444);
  }
  .qr-ruler-top {
    border-left: none;
    border-bottom: none;
  }
  .qr-ruler-left {
    border-top: none;
    border-right: none;
  }
  #qr-canvas-wrapper {
    grid-column: 2;
    grid-row: 2;
  }

  .netbox-qr-icon-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: 0.25rem;
  }
  .netbox-qr-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0.4rem;
    border: 1px solid var(--tblr-border-color, #ccc);
    border-radius: 4px;
    background: none;
    cursor: pointer;
  }
  .netbox-qr-icon-btn:hover {
    background: var(--tblr-bg-surface-secondary, #f8f9fa);
  }
  .netbox-qr-icon-btn svg {
    width: 100%;
    height: 100%;
  }
  .netbox-qr-preview-data {
    background: var(--tblr-bg-surface-secondary, #f8f9fa);
    border: 1px solid var(--tblr-border-color, #ccc);
    border-radius: 4px;
    padding: 0.75rem;
    max-height: 20rem;
    overflow: auto;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 0;
  }
  .netbox-qr-preview-error {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 8rem;
    overflow: auto;
  }
</style>

{{ layout|json_script:"qr-layout-data" }}
<script src="{% url 'plugins:netbox_labels:javascript_catalog' %}"></script>
<script src="{% static 'netbox_labels/mdi-icons-data.js' %}"></script>
<script src="{% static 'netbox_labels/qr-designer.js' %}"></script>
{% endblock %}