{% 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"
  data-width-mm="{{ object.width_mm }}"
  data-height-mm="{{ object.height_mm }}"
  data-preview-url="{% url 'plugins:netbox_labels:qrtemplate_preview' object.pk %}"
  data-search-url="{% url 'plugins:netbox_labels:qrtemplate_object_search' %}"
>
  <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="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>
      </ul>
      <input type="file" id="qr-image-file-input" accept="image/*" class="d-none">
    </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 }}" data-h="{{ preset.height_mm }}">
            {{ 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="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-wrapper" style="overflow: auto; border: 1px solid var(--tblr-border-color, #444); padding: 2rem; min-height: 320px; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#8884 0% 25%, transparent 0% 50%) 50% / 20px 20px; touch-action: none;">
        <div id="qr-canvas" style="position: relative; background: #fff; flex: none; box-shadow: 0 0 0 1px #0003;"></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>
                <pre class="netbox-qr-preview-data" id="qr-preview-data-json"></pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .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/qr-designer.js' %}"></script>
{% endblock %}