{% extends "base.html" %}
{% block title %}{% trans %}Free QR Code Generator — Create QR Codes Instantly{% endtrans %}{% endblock %}
{% block description %}{% trans %}Generate QR codes for URLs, PDFs, contacts, text, SMS, email, phone, and apps. Live preview, custom colors, logo upload, and scan analytics.{% endtrans %}{% endblock %}

{% block extra_head %}
<style>
/* ── QR Generator page styles ─────────────────────────────── */
.qr-tab-btn { transition: all 0.18s; }
.qr-tab-btn.active {
  background: var(--oc-primary, #16a34a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.qr-tab-content { display: none; }
.qr-tab-content.active { display: block; }

.dot-option {
  width: 44px; height: 44px; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  transition: all .15s; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; gap: 2px;
  background: #f1f5f9;
}
.dark .dot-option { background: #1e293b; }
.dot-option.selected {
  border-color: var(--oc-primary, #16a34a);
  background: color-mix(in srgb, var(--oc-primary, #16a34a) 12%, transparent);
  color: var(--oc-primary, #16a34a);
}
.corner-option {
  cursor: pointer; border: 2px solid transparent; border-radius: 10px;
  transition: all .15s; padding: 6px 12px;
  background: #f1f5f9; font-size: 12px;
}
.dark .corner-option { background: #1e293b; }
.corner-option.selected {
  border-color: var(--oc-primary, #16a34a);
  background: color-mix(in srgb, var(--oc-primary, #16a34a) 12%, transparent);
  color: var(--oc-primary, #16a34a);
}

/* Preview box */
.qr-preview-box {
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  background: #f8fafc; border-radius: 12px; border: 1.5px dashed #cbd5e1;
  position: relative;
}
.dark .qr-preview-box { background: #1e293b; border-color: #334155; }
#qr-preview-img { width: 100%; display: none; }
#qr-preview-img svg { width: 100%; height: auto; border-radius: 8px; display: block; }

/* Horizontal template tabs (MUI-style) */
.tmpl-scroll-btn {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px;
  border: 1px solid #e2e8f0; background: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #64748b; transition: all .15s;
}
.dark .tmpl-scroll-btn { background: #334155; border-color: #475569; color: #94a3b8; }
.tmpl-scroll-btn:hover:not(:disabled) { background: #f0fdf4; color: var(--oc-primary, #16a34a); }
.tmpl-scroll-btn:disabled { opacity: 0.35; cursor: default; }
#tmpl-viewport { overflow: hidden; flex: 1; }
#tmpl-track {
  display: flex; gap: 8px; transition: transform .22s ease;
  white-space: nowrap;
}
.tmpl-item {
  flex-shrink: 0; width: 76px; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  padding: 5px 4px 4px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; transition: all .15s;
  background: #f1f5f9;
}
.dark .tmpl-item { background: #1e293b; }
.tmpl-item.active {
  border-color: var(--oc-primary, #16a34a);
  background: color-mix(in srgb, var(--oc-primary, #16a34a) 10%, transparent);
}
.tmpl-item img {
  width: 64px; height: 64px; border-radius: 6px;
  object-fit: cover; display: block;
}
.tmpl-item-placeholder {
  width: 64px; height: 64px; border-radius: 6px;
  background: #e2e8f0; display: flex; align-items: center; justify-content: center;
}
.dark .tmpl-item-placeholder { background: #334155; }
.tmpl-item-label {
  font-size: 9px; font-weight: 600; color: #64748b; line-height: 1.2; text-align: center;
}
.tmpl-item.active .tmpl-item-label { color: var(--oc-primary, #16a34a); }

/* Toggle pill */
.toggle-pill { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-pill input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1; border-radius: 24px; transition: .3s;
}
.toggle-slider:before {
  content: ""; position: absolute; height: 18px; width: 18px;
  left: 3px; top: 3px; background: white; border-radius: 50%; transition: .3s;
}
input:checked + .toggle-slider { background: var(--oc-primary, #16a34a); }
input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Section cards */
.qr-card {
  border-radius: 14px; border: 1px solid #e2e8f0;
  background: white; padding: 20px;
}
.dark .qr-card { background: #0f172a; border-color: #1e293b; }

/* Field inputs */
.qr-input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #f8fafc;
  font-size: 14px; color: #1e293b; outline: none; transition: all .2s;
}
.dark .qr-input { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.qr-input:focus { border-color: var(--oc-primary, #16a34a); background: white; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-primary, #16a34a) 15%, transparent); }
.dark .qr-input:focus { background: #0f172a; }

/* Preset colour swatches */
.color-swatch {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: all .15s;
}
.color-swatch.active { border-color: var(--oc-primary, #16a34a); box-shadow: 0 0 0 2px white; }

/* Frame selector */
.frame-option {
  width: 72px; flex-shrink: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px;
  padding: 4px 3px 4px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; transition: all .15s;
  background: #f1f5f9;
}
.dark .frame-option { background: #1e293b; }
.frame-option.selected {
  border-color: var(--oc-primary, #16a34a);
  background: color-mix(in srgb, var(--oc-primary, #16a34a) 12%, transparent);
}
.frame-option-img {
  width: 60px; height: 60px; border-radius: 5px; object-fit: contain;
  background: #e2e8f0; display: flex; align-items: center; justify-content: center;
}
.dark .frame-option-img { background: #334155; }
.frame-option-img img { width: 100%; height: 100%; border-radius: 5px; object-fit: contain; }
.frame-option-name {
  font-size: 8px; font-weight: 600; text-align: center; line-height: 1.2;
  color: #64748b; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-option.selected .frame-option-name { color: var(--oc-primary, #16a34a); }
.qr-frame-nav-btn {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px;
  border: 1px solid #e2e8f0; background: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #64748b; transition: all .15s;
}
.dark .qr-frame-nav-btn { background: #334155; border-color: #475569; color: #94a3b8; }
.qr-frame-nav-btn:hover { background: #f0fdf4; color: var(--oc-primary, #16a34a); }
#frame-options-viewport { overflow: hidden; flex: 1; }
#frame-options-track { display: flex; gap: 6px; transition: transform .2s ease; white-space: nowrap; flex-wrap: nowrap; }
#logo-options-viewport { overflow: hidden; flex: 1; }
#logo-options-track { display: flex; gap: 6px; transition: transform .2s ease; white-space: nowrap; flex-wrap: nowrap; }

/* Color compact row */
.color-compact-input {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  overflow: hidden; background: #f8fafc;
}
.dark .color-compact-input { background: #1e293b; border-color: #334155; }
.color-hex-text {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: 12px; font-family: monospace; color: #374151;
  padding: 6px 6px; outline: none;
}
.dark .color-hex-text { color: #e2e8f0; }
.color-hex-swatch {
  width: 28px; height: 28px; flex-shrink: 0; border: none;
  cursor: pointer; position: relative; border-left: 1.5px solid #e2e8f0;
  overflow: hidden;
}
.dark .color-hex-swatch { border-left-color: #334155; }
.hidden-color-input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  cursor: pointer; border: none; padding: 0;
}

/* Logo preset cards */
.logo-preset-card {
  width: 68px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 4px 5px; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; background: #f1f5f9; transition: all .15s;
}
.dark .logo-preset-card { background: #1e293b; }
.logo-preset-card.active {
  border-color: var(--oc-primary, #16a34a);
  background: color-mix(in srgb, var(--oc-primary, #16a34a) 10%, transparent);
}
.logo-preset-card span { font-size: 9px; font-weight: 600; color: #64748b; }
.logo-preset-card.active span { color: var(--oc-primary, #16a34a); }
.logo-preset-thumb {
  width: 36px; height: 36px; border-radius: 6px;
  background: #e2e8f0; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dark .logo-preset-thumb { background: #334155; }
.logo-preset-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Pattern cards */
.patt-card {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 8px 6px 7px;
  border: 2px solid #d1d5db; border-radius: 10px;
  background: #f8fafc; cursor: pointer; transition: all .15s;
  min-width: 64px;
}
.dark .patt-card { background: #1e293b; border-color: #374151; }
.patt-card:hover { border-color: #9ca3af; }
.dark .patt-card:hover { border-color: #6b7280; }
.patt-card.active {
  border-color: var(--oc-primary, #16a34a);
  background: color-mix(in srgb, var(--oc-primary, #16a34a) 10%, transparent);
}
.dark .patt-card.active { border-color: var(--oc-primary, #16a34a); }
.patt-card img, .patt-card .patt-placeholder {
  width: 52px; height: 52px; border-radius: 6px; object-fit: cover; display: block;
  background: #e2e8f0;
}
.dark .patt-card .patt-placeholder { background: #334155; }
.patt-card-label {
  font-size: 9px; font-weight: 600; color: #64748b; text-align: center; white-space: nowrap;
}
.patt-card.active .patt-card-label { color: var(--oc-primary, #16a34a); }

/* NEW badge */
.new-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 700;
  background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0;
}
.dark .new-badge { background: #14532d; color: #86efac; border-color: #166534; }

/* Range slider */
input[type=range].design-slider { width: 100%; height: 4px; cursor: pointer; accent-color: var(--oc-primary, #16a34a); }

/* ── QR Result Modal ──────────────────────────────────────── */
#qr-result-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 16px;
}
#qr-result-modal.hidden { display: none; }
#qr-result-modal-card {
  background: #fff; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.22);
  width: 100%; max-width: 660px; overflow: hidden;
}
.dark #qr-result-modal-card { background: #1e293b; }
#qr-modal-qr-panel {
  background: #f8fafc; display: flex; align-items: center; justify-content: center;
  padding: 28px 24px; min-width: 210px; flex-shrink: 0;
}
.dark #qr-modal-qr-panel { background: #0f172a; }
#qr-modal-qr-panel > div { width: 180px; max-width: 180px; }
#qr-modal-qr-panel svg, #qr-modal-qr-panel img { width: 100%; height: auto; border-radius: 8px; display: block; }
.modal-select-wrap {
  position: relative; flex: 1;
}
.modal-select-wrap label {
  position: absolute; top: -9px; left: 10px; font-size: 10px; font-weight: 600;
  background: #fff; color: #6b7280; padding: 0 3px; pointer-events: none; z-index: 1;
}
.dark .modal-select-wrap label { background: #1e293b; color: #9ca3af; }
.modal-select-wrap select {
  width: 100%; padding: 9px 32px 9px 10px; border-radius: 8px;
  border: 1.5px solid #d1d5db; font-size: 13px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; outline: none; color: #374151; cursor: pointer;
}
.dark .modal-select-wrap select { background-color: #0f172a; border-color: #374151; color: #e2e8f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
</style>
{% endblock %}

{% block content %}
<!-- Hero -->
<div class="hero-gradient py-10 px-4 text-center">
  <h1 class="text-3xl sm:text-4xl font-bold text-white drop-shadow mb-2">
    <i class="fa fa-qrcode mr-2"></i>{% trans %}Free QR Code Generator{% endtrans %}
  </h1>
  <p class="text-white/80 text-base max-w-xl mx-auto">
    {% trans %}Create custom QR codes for URLs, contacts, SMS, email, apps and more — instantly, no sign-up needed.{% endtrans %}
  </p>
</div>

<div class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- ── Left: Form panel ──────────────────────────────── -->
    <div class="lg:col-span-2 space-y-4">

      <!-- QR Type Tabs -->
      <div class="qr-card">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">{% trans %}QR Code Type{% endtrans %}</p>
        <div class="flex flex-wrap gap-2" id="qr-type-tabs">
          {% set qr_types = [
            ('url',       'fa-link',          'URL'),
            ('pdf',       'fa-file-pdf',       'PDF'),
            ('multi_url', 'fa-layer-group',    'Multi-URL'),
            ('vcard',     'fa-address-card',   'Contact'),
            ('text',      'fa-font',           'Text'),
            ('app',       'fa-mobile-screen',  'App'),
            ('sms',       'fa-comment-sms',    'SMS'),
            ('email',     'fa-envelope',       'Email'),
            ('phone',     'fa-phone',          'Phone'),
          ] %}
          {% for t, icon, label in qr_types %}
          {% if qr_settings.get('qr_type_' + t, '1') != '0' %}
          <button class="qr-tab-btn flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 {% if loop.first %}active{% endif %}"
                  data-type="{{ t }}">
            <i class="fa {{ icon }} text-xs"></i> {{ label }}
          </button>
          {% endif %}
          {% endfor %}
        </div>
      </div>

      <!-- Content Fields -->
      <div class="qr-card">

        <!-- URL -->
        <div class="qr-tab-content active" data-for="url">
          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">{% trans %}Website URL{% endtrans %}</label>
          <input type="url" id="f-url" placeholder="https://example.com" class="qr-input">
        </div>

        <!-- PDF -->
        <div class="qr-tab-content" data-for="pdf">
          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">{% trans %}PDF URL{% endtrans %}</label>
          <input type="url" id="f-pdf-url" placeholder="https://example.com/document.pdf" class="qr-input">
          <p class="mt-1.5 text-xs text-gray-400">{% trans %}Direct link to a PDF file or document page{% endtrans %}</p>
        </div>

        <!-- Multi-URL -->
        <div class="qr-tab-content" data-for="multi_url">
          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">{% trans %}Multiple URLs{% endtrans %}</label>
          <div id="multi-url-list" class="space-y-2 mb-3">
            <div class="flex gap-2 multi-url-row">
              <div class="flex flex-col gap-1 flex-1">
                <input type="text" placeholder="{% trans %}Link title (optional){% endtrans %}" class="multi-url-title qr-input text-sm">
                <input type="url" placeholder="https://example.com" class="multi-url-input qr-input">
              </div>
            </div>
          </div>
          <button type="button" id="add-url-btn" class="flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400 font-medium hover:underline">
            <i class="fa fa-plus"></i>{% trans %}Add another URL{% endtrans %}
          </button>
          <p class="mt-2 text-xs text-gray-400">{% trans %}The QR will redirect to the first URL by default{% endtrans %}</p>
        </div>

        <!-- vCard / Contact -->
        <div class="qr-tab-content" data-for="vcard">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}First Name{% endtrans %}</label>
              <input type="text" id="f-first-name" placeholder="John" class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Last Name{% endtrans %}</label>
              <input type="text" id="f-last-name" placeholder="Smith" class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Phone{% endtrans %}</label>
              <input type="tel" id="f-vcard-phone" placeholder="+1 555 000 0000" class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Email{% endtrans %}</label>
              <input type="email" id="f-vcard-email" placeholder="john@example.com" class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Company{% endtrans %}</label>
              <input type="text" id="f-company" placeholder="Acme Inc." class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Job Title{% endtrans %}</label>
              <input type="text" id="f-job-title" placeholder="CEO" class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Website{% endtrans %}</label>
              <input type="url" id="f-vcard-website" placeholder="https://acme.com" class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Address{% endtrans %}</label>
              <input type="text" id="f-address" placeholder="123 Main St, City" class="qr-input">
            </div>
          </div>
        </div>

        <!-- Plain Text -->
        <div class="qr-tab-content" data-for="text">
          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">{% trans %}Text Content{% endtrans %}</label>
          <textarea id="f-text-content" rows="4" placeholder="{% trans %}Enter any text here...{% endtrans %}" class="qr-input resize-none"></textarea>
        </div>

        <!-- App -->
        <div class="qr-tab-content" data-for="app">
          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">{% trans %}App Store Links{% endtrans %}</label>
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1"><i class="fa-brands fa-apple mr-1"></i>{% trans %}iOS App Store URL{% endtrans %}</label>
              <input type="url" id="f-ios-url" placeholder="https://apps.apple.com/..." class="qr-input">
            </div>
            <div>
              <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1"><i class="fa-brands fa-google-play mr-1"></i>{% trans %}Google Play URL{% endtrans %}</label>
              <input type="url" id="f-android-url" placeholder="https://play.google.com/..." class="qr-input">
            </div>
          </div>
        </div>

        <!-- SMS -->
        <div class="qr-tab-content" data-for="sms">
          <div class="space-y-3">
            <div>
              <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">{% trans %}Phone Number{% endtrans %}</label>
              <input type="tel" id="f-sms-phone" placeholder="+1 555 000 0000" class="qr-input">
            </div>
            <div>
              <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">{% trans %}Message (optional){% endtrans %}</label>
              <textarea id="f-sms-message" rows="3" placeholder="{% trans %}Pre-filled message...{% endtrans %}" class="qr-input resize-none"></textarea>
            </div>
          </div>
        </div>

        <!-- Email -->
        <div class="qr-tab-content" data-for="email">
          <div class="space-y-3">
            <div>
              <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">{% trans %}Recipient Email{% endtrans %}</label>
              <input type="email" id="f-email-to" placeholder="recipient@example.com" class="qr-input">
            </div>
            <div>
              <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">{% trans %}Subject (optional){% endtrans %}</label>
              <input type="text" id="f-email-subject" placeholder="{% trans %}Hello!{% endtrans %}" class="qr-input">
            </div>
            <div>
              <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1">{% trans %}Body (optional){% endtrans %}</label>
              <textarea id="f-email-body" rows="3" placeholder="{% trans %}Message body...{% endtrans %}" class="qr-input resize-none"></textarea>
            </div>
          </div>
        </div>

        <!-- Phone -->
        <div class="qr-tab-content" data-for="phone">
          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">{% trans %}Phone Number{% endtrans %}</label>
          <input type="tel" id="f-phone-number" placeholder="+1 555 000 0000" class="qr-input">
          <p class="mt-1.5 text-xs text-gray-400">{% trans %}Scanning this QR will open the phone dialer{% endtrans %}</p>
        </div>

      </div>

      <!-- Admin Templates -->
      <div class="qr-card hidden" id="tmpl-section">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">{% trans %}Templates{% endtrans %}</p>
        <div class="flex items-center gap-2">
          <button type="button" id="tmpl-prev" class="tmpl-scroll-btn" aria-label="Previous templates" disabled>
            <i class="fa fa-chevron-left"></i>
          </button>
          <div id="tmpl-viewport">
            <div id="tmpl-track"><!-- populated by JS --></div>
          </div>
          <button type="button" id="tmpl-next" class="tmpl-scroll-btn" aria-label="Next templates">
            <i class="fa fa-chevron-right"></i>
          </button>
        </div>
      </div>

      <!-- Design Options -->
      <div class="qr-card">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">{% trans %}Design options{% endtrans %}</p>

        <!-- Color -->
        <div class="mb-5">
          <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">{% trans %}Color{% endtrans %}</p>
          <div class="flex gap-3">
            <!-- Background -->
            <div class="flex-1 min-w-0">
              <div class="color-compact-input">
                <input type="text" class="color-hex-text" id="bg-hex" value="#ffffff" maxlength="7" spellcheck="false">
                <button type="button" class="color-hex-swatch" id="bg-swatch" style="background:#ffffff">
                  <input type="color" id="bg-color" value="#ffffff" class="hidden-color-input">
                </button>
              </div>
              <p class="text-xs text-gray-400 mt-1 text-center">{% trans %}Background{% endtrans %}</p>
            </div>
            <!-- Pixels (fg) -->
            <div class="flex-1 min-w-0">
              <div class="color-compact-input">
                <input type="text" class="color-hex-text" id="fg-hex" value="#000000" maxlength="7" spellcheck="false">
                <button type="button" class="color-hex-swatch" id="fg-swatch" style="background:#000000">
                  <input type="color" id="fg-color" value="#000000" class="hidden-color-input">
                </button>
              </div>
              <p class="text-xs text-gray-400 mt-1 text-center">{% trans %}Pixels{% endtrans %}</p>
            </div>
            <!-- Squares (eye) -->
            <div class="flex-1 min-w-0">
              <div class="color-compact-input">
                <input type="text" class="color-hex-text" id="eye-hex" value="#000000" maxlength="7" spellcheck="false">
                <button type="button" class="color-hex-swatch" id="eye-swatch" style="background:#000000">
                  <input type="color" id="eye-color" value="#000000" class="hidden-color-input">
                </button>
              </div>
              <p class="text-xs text-gray-400 mt-1 text-center">{% trans %}Squares{% endtrans %}</p>
            </div>
          </div>
          <!-- hidden compat spans for JS -->
          <span id="fg-color-label" class="hidden">#000000</span>
          <span id="bg-color-label" class="hidden">#ffffff</span>
          <span id="eye-color-label" class="hidden">#000000</span>
          <input type="checkbox" id="eye-sync" class="hidden" checked>
        </div>

        <!-- Logo -->
        {% if qr_settings.get('qr_allow_logo','1') == '1' %}
        <div class="mb-5">
          <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">{% trans %}Logo{% endtrans %}</p>
          <!-- Logo carousel: No Logo + Upload + admin presets all in one scrollable row -->
          <div class="flex items-center gap-1" id="logo-carousel-wrapper">
            <button type="button" class="qr-frame-nav-btn hidden" id="logo-prev-btn" aria-label="Previous logos"><i class="fa fa-chevron-left"></i></button>
            <div id="logo-options-viewport">
              <div id="logo-options-track">
                <button type="button" class="logo-preset-card active" data-logo="none">
                  <div class="logo-preset-thumb">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#94a3b8" stroke-width="1.8"/><line x1="5.6" y1="5.6" x2="18.4" y2="18.4" stroke="#94a3b8" stroke-width="1.8"/></svg>
                  </div>
                  <span>{% trans %}No Logo{% endtrans %}</span>
                </button>
                <button type="button" class="logo-preset-card" data-logo="upload">
                  <div class="logo-preset-thumb" style="background:transparent;">
                    <i class="fa fa-arrow-up text-green-500" style="font-size:20px;"></i>
                  </div>
                  <span>{% trans %}Upload{% endtrans %}</span>
                </button>
                <!-- Admin logo presets injected here by JS -->
              </div>
            </div>
            <button type="button" class="qr-frame-nav-btn hidden" id="logo-next-btn" aria-label="Next logos"><i class="fa fa-chevron-right"></i></button>
          </div>

          <!-- File upload (shown when Upload card active) -->
          <div id="logo-upload-row" class="mt-2 hidden">
            <label class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-sm text-gray-600 dark:text-gray-400 cursor-pointer hover:border-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 transition w-fit">
              <i class="fa fa-image text-green-500"></i>
              <span>{% trans %}Upload Logo{% endtrans %}</span>
              <input type="file" id="logo-upload" accept="image/*" class="hidden">
            </label>
            <div class="flex items-center gap-2 mt-1">
              <button type="button" id="remove-logo" class="hidden flex items-center gap-1 text-xs text-red-500 hover:text-red-600 px-2 py-1 rounded border border-red-200">
                <i class="fa fa-times"></i> {% trans %}Remove{% endtrans %}
              </button>
              <span id="logo-name" class="text-xs text-gray-400 truncate max-w-xs"></span>
            </div>
          </div>
          <!-- Logo size & margin sliders -->
          <div class="grid grid-cols-2 gap-4 mt-3">
            <div>
              <div class="flex items-center justify-between mb-1.5">
                <label class="text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Logo size{% endtrans %}</label>
                <span id="logo-size-val" class="text-xs text-gray-400">22%</span>
              </div>
              <input type="range" id="logo-size" min="10" max="35" value="22" step="1" class="design-slider">
            </div>
            <div>
              <div class="flex items-center justify-between mb-1.5">
                <label class="text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Logo margin{% endtrans %}</label>
                <span id="logo-margin-val" class="text-xs text-gray-400">0px</span>
              </div>
              <input type="range" id="logo-margin" min="0" max="20" value="0" step="1" class="design-slider">
            </div>
          </div>
        </div>
        {% endif %}

        <!-- Frames -->
        <div class="mb-5" id="frame-section">
          <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">{% trans %}Frame{% endtrans %}</p>
          <div class="flex gap-2 flex-wrap" id="frame-cards-row">
            <!-- "No Frame" always first -->
            <button type="button" class="logo-preset-card active" data-frame-overlay="none">
              <div class="logo-preset-thumb">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#94a3b8" stroke-width="1.8"/><line x1="5.6" y1="5.6" x2="18.4" y2="18.4" stroke="#94a3b8" stroke-width="1.8"/></svg>
              </div>
              <span>{% trans %}No Frame{% endtrans %}</span>
            </button>
            <!-- "Upload" -->
            <button type="button" class="logo-preset-card" data-frame-overlay="upload">
              <div class="logo-preset-thumb" style="background:transparent;">
                <i class="fa fa-arrow-up text-blue-500" style="font-size:20px;"></i>
              </div>
              <span>{% trans %}Upload{% endtrans %}</span>
            </button>
            <!-- Admin frame presets injected here by JS -->
          </div>
          <!-- Admin label shown when frames are available -->
          <p class="text-xs text-gray-400 mt-1 hidden" id="frame-admin-label">{% trans %}Admin presets above · transparent PNG overlaid on your QR code{% endtrans %}</p>
          <!-- User frame upload row -->
          <div id="frame-upload-row" class="mt-2 hidden">
            <label class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-sm text-gray-600 dark:text-gray-400 cursor-pointer hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition w-fit">
              <i class="fa fa-image text-blue-500"></i>
              <span>{% trans %}Upload Frame (transparent PNG){% endtrans %}</span>
              <input type="file" id="frame-upload" accept="image/png,image/gif,image/webp" class="hidden">
            </label>
            <div class="flex items-center gap-2 mt-1">
              <span id="frame-name" class="text-xs text-gray-500"></span>
              <button type="button" id="remove-frame" class="hidden flex items-center gap-1 text-xs text-red-500 hover:text-red-600 px-2 py-1 rounded border border-red-200">
                <i class="fa fa-times"></i> {% trans %}Remove{% endtrans %}
              </button>
            </div>
          </div>
        </div>


        {% if user_id and plan and not plan.get('qr_advanced_customization', 1)|int %}
        <div class="mt-3 flex items-start gap-3 p-3 rounded-xl bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800">
          <i class="fa fa-palette text-indigo-500 mt-0.5"></i>
          <div>
            <p class="text-xs font-semibold text-indigo-700 dark:text-indigo-400">{% trans %}Advanced Customization{% endtrans %}</p>
            <p class="text-xs text-indigo-600 dark:text-indigo-500">
              {% trans %}<a href="/pricing" class="underline font-semibold">Upgrade your plan</a> to unlock dot styles, custom colors, and logo embedding{% endtrans %}
            </p>
          </div>
        </div>
        {% endif %}

        <!-- HIDDEN dot/corner selectors kept for getOpts() compatibility -->
        <div class="hidden" id="dot-style-options" aria-hidden="true">
          <button type="button" class="dot-option selected" data-style="square"></button>
          <button type="button" class="dot-option" data-style="rounded"></button>
          <button type="button" class="dot-option" data-style="circle"></button>
          <button type="button" class="dot-option" data-style="gapped"></button>
          <button type="button" class="dot-option" data-style="vertical"></button>
          <button type="button" class="dot-option" data-style="horizontal"></button>
        </div>
        <div class="hidden" id="corner-style-options" aria-hidden="true">
          <button type="button" class="corner-option selected" data-corner="square"></button>
          <button type="button" class="corner-option" data-corner="rounded"></button>
          <button type="button" class="corner-option" data-corner="dot"></button>
          <button type="button" class="corner-option" data-corner="circle"></button>
        </div>
      </div>

      <!-- Pattern and Style -->
      <div class="qr-card">
        <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-3">{% trans %}Pattern and Style{% endtrans %}</p>
        <div class="flex flex-wrap gap-2" id="patt-track"><!-- populated by JS --></div>
      </div>

      <!-- Options -->
      <div class="qr-card">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">{% trans %}Options{% endtrans %}</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

          {% if user_id %}
          <div class="sm:col-span-2">
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{% trans %}Label (optional){% endtrans %}</label>
            <input type="text" id="qr-label" maxlength="100" placeholder="{% trans %}e.g. My Business Card{% endtrans %}" class="qr-input">
          </div>
          {% endif %}

          <!-- Track Scans -->
          {% if user_id and plan and plan.get('qr_analytics_days', 30)|int > 0 %}
          <div class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50">
            <label class="toggle-pill flex-shrink-0">
              <input type="checkbox" id="track-scans">
              <span class="toggle-slider"></span>
            </label>
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{% trans %}Track Scans{% endtrans %}</p>
              <p class="text-xs text-gray-400">{% trans %}Log every scan with analytics{% endtrans %}</p>
            </div>
          </div>
          {% else %}
          <div class="flex items-start gap-3 p-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
            <i class="fa fa-chart-bar text-amber-500 mt-0.5"></i>
            <div>
              <p class="text-xs font-semibold text-amber-700 dark:text-amber-400">{% trans %}Track your scans{% endtrans %}</p>
              <p class="text-xs text-amber-600 dark:text-amber-500">
                {% if user_id %}
                  {% trans %}<a href="/pricing" class="underline font-semibold">Upgrade your plan</a> to enable scan analytics{% endtrans %}
                {% else %}
                  {% trans %}<a href="/login" class="underline font-semibold">Sign in</a> and upgrade to track scans{% endtrans %}
                {% endif %}
              </p>
            </div>
          </div>
          {% endif %}

          <!-- Dynamic QR -->
          {% set dyn_limit = plan.get('qr_dynamic_limit', 2)|int if plan else 2 %}
          {% if user_id and dyn_limit >= 0 %}
          <div class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50">
            <label class="toggle-pill flex-shrink-0">
              <input type="checkbox" id="is-dynamic">
              <span class="toggle-slider"></span>
            </label>
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{% trans %}Dynamic QR{% endtrans %}</p>
              {% if dyn_limit > 0 %}
              <p class="text-xs text-gray-400">{% trans %}Editable destination •{% endtrans %} {{ dyn_limit }} {% trans %}allowed{% endtrans %}</p>
              {% else %}
              <p class="text-xs text-gray-400">{% trans %}Change destination after printing{% endtrans %}</p>
              {% endif %}
            </div>
          </div>
          {% else %}
          <div class="flex items-start gap-3 p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
            <i class="fa fa-rotate text-blue-500 mt-0.5"></i>
            <div>
              <p class="text-xs font-semibold text-blue-700 dark:text-blue-400">{% trans %}Dynamic QR Codes{% endtrans %}</p>
              <p class="text-xs text-blue-600 dark:text-blue-500">
                {% if user_id %}
                  {% trans %}<a href="/pricing" class="underline font-semibold">Upgrade your plan</a> to create dynamic QR codes{% endtrans %}
                {% else %}
                  {% trans %}<a href="/login" class="underline font-semibold">Sign in</a> to create dynamic QR codes{% endtrans %}
                {% endif %}
              </p>
            </div>
          </div>
          {% endif %}

          <!-- Watermark -->
          {% set wm_text = qr_settings.get('qr_watermark_text', '') %}
          {% if wm_text %}
            {% if user_id and plan and plan.get('qr_watermark_free', 0)|int %}
            <div class="sm:col-span-2 flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50">
              <label class="toggle-pill flex-shrink-0">
                <input type="checkbox" id="remove-watermark" checked>
                <span class="toggle-slider"></span>
              </label>
              <div>
                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{% trans %}Watermark-free{% endtrans %}</p>
                <p class="text-xs text-gray-400">{% trans %}Toggle off to add watermark branding{% endtrans %}</p>
              </div>
            </div>
            {% elif user_id %}
            <div class="sm:col-span-2 flex items-start gap-3 p-3 rounded-xl bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
              <i class="fa fa-star text-purple-500 mt-0.5"></i>
              <div>
                <p class="text-xs font-semibold text-purple-700 dark:text-purple-400">{% trans %}Remove Watermark{% endtrans %}</p>
                <p class="text-xs text-purple-600 dark:text-purple-500">
                  {% trans %}<a href="/pricing" class="underline font-semibold">Upgrade your plan</a> to generate QR codes without a watermark{% endtrans %}
                </p>
              </div>
            </div>
            {% endif %}
          {% endif %}
        </div>
      </div>

    </div><!-- end left col -->

    <!-- ── Right: Preview + Actions ──────────────────────── -->
    <div class="space-y-4">
      <div class="qr-card sticky top-24">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">{% trans %}Preview{% endtrans %}</p>

        <!-- Preview box -->
        <div class="qr-preview-box mb-2" id="qr-preview-box">
          <div id="qr-preview-placeholder" class="text-center text-gray-400 px-4">
            <i class="fa fa-qrcode text-5xl mb-3 block opacity-20"></i>
            <p class="text-sm">{% trans %}Fill in the form to see a live preview{% endtrans %}</p>
          </div>
          <div id="qr-preview-img" role="img" aria-label="QR Code Preview"></div>
        </div>
        <!-- Tracking active badge (shown only when track-scans is on) -->
        <div id="tracking-preview-badge" class="hidden mb-3 px-3 py-2 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 flex items-start gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 text-green-600 dark:text-green-400 flex-shrink-0"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
          <div>
            <p class="text-xs font-semibold text-green-700 dark:text-green-400">{% trans %}Tracking active{% endtrans %}</p>
            <p id="tracking-badge-sub" class="text-xs text-green-600 dark:text-green-500">{% trans %}Click Generate to save your tracking link{% endtrans %}</p>
          </div>
        </div>

        <!-- Generate button -->
        <button id="btn-generate"
          class="w-full py-3 rounded-xl bg-green-600 hover:bg-green-700 text-white font-bold text-sm transition-all shadow-md hover:shadow-lg active:scale-[.98] disabled:opacity-50 flex items-center justify-center gap-2">
          <i class="fa fa-qrcode"></i>{% trans %}Generate QR Code{% endtrans %}
        </button>

        <!-- Download section (hidden until generated) -->
        <div id="download-section" class="hidden mt-3 space-y-2">
          <button id="btn-copy-qr"
            class="w-full py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-sm font-semibold text-gray-700 dark:text-gray-200 transition flex items-center justify-center gap-2">
            <i class="fa fa-copy"></i> {% trans %}Copy to Clipboard{% endtrans %}
          </button>

          <p class="text-xs font-bold text-gray-400 uppercase tracking-widest pt-1">{% trans %}Download{% endtrans %}</p>
          <div class="grid grid-cols-3 gap-2">
            {% if qr_settings.get('qr_allow_png','1') != '0' %}
            <button class="btn-download py-2.5 rounded-xl border-2 border-gray-200 dark:border-gray-700 text-xs font-bold text-gray-600 dark:text-gray-300 hover:border-green-500 hover:text-green-600 transition" data-fmt="png">
              <i class="fa fa-image block mb-0.5"></i>PNG
            </button>
            {% endif %}
            {% if qr_settings.get('qr_allow_svg','1') != '0' %}
            <button class="btn-download py-2.5 rounded-xl border-2 border-gray-200 dark:border-gray-700 text-xs font-bold text-gray-600 dark:text-gray-300 hover:border-green-500 hover:text-green-600 transition" data-fmt="svg">
              <i class="fa fa-vector-square block mb-0.5"></i>SVG
            </button>
            {% endif %}
            {% if qr_settings.get('qr_allow_pdf_download','1') != '0' %}
            <button class="btn-download py-2.5 rounded-xl border-2 border-gray-200 dark:border-gray-700 text-xs font-bold text-gray-600 dark:text-gray-300 hover:border-green-500 hover:text-green-600 transition" data-fmt="pdf">
              <i class="fa fa-file-pdf block mb-0.5"></i>PDF
            </button>
            {% endif %}
          </div>

          <div id="dynamic-info" class="hidden mt-2 p-3 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
            <p class="text-xs font-semibold text-green-700 dark:text-green-400 mb-1"><i class="fa fa-check-circle mr-1"></i>{% trans %}Dynamic QR Created{% endtrans %}</p>
            <p class="text-xs text-green-600 dark:text-green-500">{% trans %}You can update the destination anytime from your QR library.{% endtrans %}</p>
            <a href="/qr-code-generator/my-codes" class="text-xs text-green-700 dark:text-green-400 font-semibold underline mt-1 inline-block">{% trans %}Manage my QR codes →{% endtrans %}</a>
          </div>
        </div>

        <!-- Share panel — shown after Generate when tracking is enabled -->
        <div id="share-panel" class="hidden mt-3 p-4 rounded-xl bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-700">
          <p class="text-xs font-bold text-indigo-700 dark:text-indigo-300 uppercase tracking-wider mb-2">
            <i class="fa fa-share-nodes mr-1"></i>{% trans %}Share your tracking link{% endtrans %}
          </p>
          <div class="flex items-center gap-2">
            <input id="share-url-input" type="text" readonly
              class="flex-1 min-w-0 px-3 py-2 rounded-lg border border-indigo-200 dark:border-indigo-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-100 font-mono outline-none select-all cursor-text"
              value="">
            <button id="btn-copy-share-url" type="button"
              class="shrink-0 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition flex items-center gap-1">
              <i class="fa fa-copy"></i> {% trans %}Copy{% endtrans %}
            </button>
          </div>
          <p class="text-xs text-indigo-500 dark:text-indigo-400 mt-2">
            {% trans %}Anyone who scans or visits this link will be redirected and tracked.{% endtrans %}
            {% if user_id %}
            <a href="/qr-code-generator/my-codes" class="font-semibold underline ml-1">{% trans %}View analytics →{% endtrans %}</a>
            {% endif %}
          </p>
        </div>

        {% if user_id %}
        <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
          <a href="/qr-code-generator/my-codes"
            class="flex items-center gap-2 text-sm text-green-600 dark:text-green-400 font-semibold hover:underline">
            <i class="fa fa-list"></i>{% trans %}My QR Code Library{% endtrans %}
          </a>
        </div>
        {% endif %}
      </div>
    </div>

  </div>
</div>

<!-- ── QR Result Modal ─────────────────────────────────────── -->
<div id="qr-result-modal" class="hidden" role="dialog" aria-modal="true">
  <div id="qr-result-modal-card">
    <!-- Top row: QR image | info + actions -->
    <div class="flex flex-col sm:flex-row">
      <!-- Left: large QR preview -->
      <div id="qr-modal-qr-panel">
        <div id="qr-modal-img-wrap"></div>
      </div>

      <!-- Right: info + actions -->
      <div class="flex-1 p-6 flex flex-col gap-4 min-w-0">
        <!-- Heading + close -->
        <div class="flex items-start gap-3">
          <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white leading-snug">{% trans %}Name your QR Code and share it!{% endtrans %} ⭐</h2>
          </div>
          <button id="qr-modal-close" type="button" aria-label="Close"
            class="shrink-0 w-7 h-7 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-xl leading-none transition mt-0.5">
            &times;
          </button>
        </div>

        <!-- QR type label -->
        <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 -mt-2">
          <span id="qr-modal-type-label"></span>
          <i class="fa fa-pen text-green-500 text-xs ml-1"></i>
        </p>

        <!-- URL/content field with eye toggle -->
        <div class="relative">
          <input id="qr-modal-url-input" type="text" readonly
            class="w-full px-3 py-2 pr-10 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 font-mono outline-none select-all cursor-text"
            placeholder="—">
          <button id="qr-modal-eye-btn" type="button"
            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
            <i class="fa fa-eye text-sm"></i>
          </button>
        </div>

        <!-- Format + Size selects -->
        <div class="flex gap-3 mt-1">
          <div class="modal-select-wrap">
            <label>{% trans %}Image Format{% endtrans %}</label>
            <select id="qr-modal-fmt">
              {% if qr_settings.get('qr_allow_png','1') != '0' %}<option value="png">PNG</option>{% endif %}
              {% if qr_settings.get('qr_allow_svg','1') != '0' %}<option value="svg">SVG</option>{% endif %}
              {% if qr_settings.get('qr_allow_pdf_download','1') != '0' %}<option value="pdf">PDF</option>{% endif %}
            </select>
          </div>
          <div class="modal-select-wrap">
            <label>{% trans %}Image Size{% endtrans %}</label>
            <select id="qr-modal-size">
              <option value="500">500px</option>
              <option value="750">750px</option>
              <option value="1000" selected>1000px</option>
              <option value="2000">2000px</option>
            </select>
          </div>
        </div>

        <!-- Download + Copy buttons -->
        <div class="flex gap-2">
          <button id="qr-modal-download-btn" type="button"
            class="flex-1 py-2.5 rounded-xl bg-green-600 hover:bg-green-700 active:scale-[.98] text-white font-bold text-sm transition flex items-center justify-center gap-2 shadow">
            <i class="fa fa-download"></i> {% trans %}Download{% endtrans %}
          </button>
          <button id="qr-modal-copy-btn" type="button"
            class="px-4 py-2.5 rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700 transition flex items-center justify-center"
            title="{% trans %}Copy to clipboard{% endtrans %}">
            <i class="fa fa-copy text-gray-600 dark:text-gray-300 text-sm"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Footer: scan count (only when tracking was used) -->
    <div id="qr-modal-footer" class="hidden border-t border-gray-100 dark:border-gray-800 px-5 py-3 flex items-center justify-between gap-3 bg-gray-50/60 dark:bg-gray-800/40">
      <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        <i class="fa fa-chart-line text-red-400 text-sm"></i>
        {% trans %}You have received{% endtrans %}
        <strong id="qr-modal-scan-count" class="text-gray-800 dark:text-white">0</strong>
        {% trans %}scans on this QR Code.{% endtrans %}
      </div>
      <a id="qr-modal-check-data" href="/qr-code-generator/my-codes"
        class="shrink-0 px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition">
        {% trans %}Check scan data{% endtrans %}
      </a>
    </div>
  </div>
</div>

<!-- Feature strip -->
<div class="max-w-6xl mx-auto px-4 pb-12">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
    {% set features = [
      ('fa-bolt',      'Instant Preview',  'See your QR update as you type'),
      ('fa-palette',   'Custom Colors',    'Pick any foreground and background color'),
      ('fa-chart-bar', 'Scan Analytics',   'Track how many times your QR was scanned'),
      ('fa-rotate',    'Dynamic QR',       'Update the destination URL without reprinting'),
    ] %}
    {% for icon, title, desc in features %}
    <div class="qr-card text-center hover:shadow-md transition">
      <i class="fa {{ icon }} text-green-500 text-2xl mb-2 block"></i>
      <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-1">{{ title }}</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">{{ desc }}</p>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
(function () {
  'use strict';

  /* ── State ──────────────────────────────────────────── */
  var currentType = 'url';
  var previewTimer = null;
  var logoB64 = '';
  var currentEC = 'M';
  var lastContent = '';
  var lastImg = null;
  var lastPng  = null;   /* PNG from last generate — used for clipboard copy */
  var activeLogo = 'none';
  var frameOverlayB64 = '';
  var tmplScrollOffset = 0;
  var TMPL_ITEM_W = 90;
  var activePatternIdx = 0;
  var _adminTemplates = [];
  /* Tracking URL reuse — set after a successful /generate with track_scans=true.
     Cleared whenever the QR content changes so old links don't linger. */
  var activeTrackingUrl = '';
  var activeShortCode   = '';

  /* ── Pattern options (5) ─────────────────────────────── */
  var PATTERN_OPTIONS = [
    { label: 'Classic', dot: 'square',  corner: 'square'  },
    { label: 'Rounded', dot: 'circle',  corner: 'circle'  },
    { label: 'Thin',    dot: 'gapped',  corner: 'square'  },
    { label: 'Smooth',  dot: 'rounded', corner: 'rounded' },
    { label: 'Circles', dot: 'circle',  corner: 'rounded' },
  ];


  /* ── Colour helpers ──────────────────────────────────── */
  function _setColor(hexId, swatchId, colorId, hex) {
    if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return;
    var h = document.getElementById(hexId);
    var s = document.getElementById(swatchId);
    var c = document.getElementById(colorId);
    if (h) h.value = hex.toLowerCase();
    if (s) s.style.background = hex;
    if (c) c.value = hex;
  }
  function _syncLabels() {
    var pairs = [['fg-color','fg-color-label'],['bg-color','bg-color-label'],['eye-color','eye-color-label']];
    pairs.forEach(function(p) {
      var el = document.getElementById(p[0]);
      var lb = document.getElementById(p[1]);
      if (el && lb) lb.textContent = el.value;
    });
  }

  /* ── Compact colour inputs ───────────────────────────── */
  function _wireColor(hexId, swatchId, colorId, onChange) {
    var hexEl   = document.getElementById(hexId);
    var colorEl = document.getElementById(colorId);
    var swEl    = document.getElementById(swatchId);
    if (!hexEl || !colorEl) return;
    hexEl.addEventListener('input', function () {
      var val = this.value.trim();
      if (!/^#/.test(val)) val = '#' + val;
      if (/^#[0-9a-fA-F]{6}$/.test(val)) {
        colorEl.value = val;
        if (swEl) swEl.style.background = val;
        onChange(val);
      }
    });
    hexEl.addEventListener('blur', function () {
      var val = this.value.trim();
      if (!/^#/.test(val)) val = '#' + val;
      if (/^#[0-9a-fA-F]{6}$/.test(val)) { this.value = val.toLowerCase(); }
      else { this.value = colorEl.value; }
    });
    colorEl.addEventListener('input', function () {
      if (hexEl) hexEl.value = this.value.toLowerCase();
      if (swEl) swEl.style.background = this.value;
      onChange(this.value);
    });
  }
  _wireColor('fg-hex',  'fg-swatch',  'fg-color',  function () { _syncLabels(); manualChange(); });
  _wireColor('bg-hex',  'bg-swatch',  'bg-color',  function () { _syncLabels(); manualChange(); });
  _wireColor('eye-hex', 'eye-swatch', 'eye-color', function () { _syncLabels(); manualChange(); });

  /* ── manualChange: clear active template card ─────────── */
  function manualChange() {
    document.querySelectorAll('.tmpl-item').forEach(function (t) { t.classList.remove('active'); });
    schedulePreview();
  }

  /* ── Track-scans toggle → auto-update QR preview ─────── */
  var trackScansToggle = document.getElementById('track-scans');
  if (trackScansToggle) {
    trackScansToggle.addEventListener('change', function () {
      /* Hide badge immediately when turning off so it doesn't linger */
      if (!this.checked) {
        var b = document.getElementById('tracking-preview-badge');
        if (b) b.classList.add('hidden');
      }
      schedulePreview();
    });
  }

  /* ── SVG → PNG helper (rasterises SVG data URI to base64 PNG) ── */
  function _svgToPng(svgUri, size, callback) {
    var canvas = document.createElement('canvas');
    canvas.width = size; canvas.height = size;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {
      ctx.drawImage(img, 0, 0, size, size);
      try { callback(canvas.toDataURL('image/png')); }
      catch (e) { callback(''); }
    };
    img.onerror = function () { callback(''); };
    img.src = svgUri;
  }

  /* ── Logo preset cards: handlers attached via _attachLogoCardHandler (defined below) ── */

  /* ── Logo sliders ────────────────────────────────────── */
  var logoSizeEl    = document.getElementById('logo-size');
  var logoMarginEl  = document.getElementById('logo-margin');
  var logoSizeVal   = document.getElementById('logo-size-val');
  var logoMarginVal = document.getElementById('logo-margin-val');
  if (logoSizeEl) logoSizeEl.addEventListener('input', function () {
    if (logoSizeVal) logoSizeVal.textContent = this.value + '%';
    schedulePreview();
  });
  if (logoMarginEl) logoMarginEl.addEventListener('input', function () {
    if (logoMarginVal) logoMarginVal.textContent = this.value + 'px';
    schedulePreview();
  });

  /* ── Logo file upload ────────────────────────────────── */
  var logoInput = document.getElementById('logo-upload');
  if (logoInput) logoInput.addEventListener('change', function () {
    var file = this.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function (e) {
      logoB64 = e.target.result;
      currentEC = 'H';
      var n = document.getElementById('logo-name'); if (n) n.textContent = file.name;
      var r = document.getElementById('remove-logo'); if (r) r.classList.remove('hidden');
      schedulePreview();
    };
    reader.readAsDataURL(file);
  });
  var removeLogo = document.getElementById('remove-logo');
  if (removeLogo) removeLogo.addEventListener('click', function () {
    logoB64 = '';
    currentEC = 'M';
    var n = document.getElementById('logo-name'); if (n) n.textContent = '';
    this.classList.add('hidden');
    if (logoInput) logoInput.value = '';
    schedulePreview();
  });

  /* ── Tab switching ───────────────────────────────────── */
  document.getElementById('qr-type-tabs').addEventListener('click', function (e) {
    var btn = e.target.closest('.qr-tab-btn');
    if (!btn) return;
    currentType = btn.dataset.type;
    document.querySelectorAll('.qr-tab-btn').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
    document.querySelectorAll('.qr-tab-content').forEach(function (c) { c.classList.remove('active'); });
    var panel = document.querySelector('.qr-tab-content[data-for="' + currentType + '"]');
    if (panel) panel.classList.add('active');
    contentChanged();   /* type change = new content — clear stale tracking URL */
  });

  var rmWm = document.getElementById('remove-watermark');
  if (rmWm) rmWm.addEventListener('change', manualChange);

  /* ── Frame cards (overlay-based) ────────────────────── */
  (function () {
    var frameCardsRow = document.getElementById('frame-cards-row');
    if (!frameCardsRow) return;

    function _setActiveFrameCard(card) {
      frameCardsRow.querySelectorAll('.logo-preset-card').forEach(function (c) { c.classList.remove('active'); });
      card.classList.add('active');
    }

    frameCardsRow.addEventListener('click', function (e) {
      var card = e.target.closest('.logo-preset-card');
      if (!card) return;
      _setActiveFrameCard(card);
      var overlay = card.dataset.frameOverlay;
      var uploadRow = document.getElementById('frame-upload-row');
      if (overlay === 'upload') {
        if (uploadRow) uploadRow.classList.remove('hidden');
      } else if (overlay === 'none') {
        frameOverlayB64 = '';
        if (uploadRow) uploadRow.classList.add('hidden');
        schedulePreview();
      } else {
        frameOverlayB64 = card.dataset.b64 || '';
        if (uploadRow) uploadRow.classList.add('hidden');
        schedulePreview();
      }
    });

    var frameUploadInput = document.getElementById('frame-upload');
    if (frameUploadInput) {
      frameUploadInput.addEventListener('change', function () {
        var file = this.files[0];
        if (!file) return;
        var nameEl   = document.getElementById('frame-name');
        var removeEl = document.getElementById('remove-frame');
        if (nameEl)   nameEl.textContent = file.name;
        if (removeEl) removeEl.classList.remove('hidden');
        var reader = new FileReader();
        reader.onload = function (ev) {
          frameOverlayB64 = ev.target.result;
          schedulePreview();
        };
        reader.readAsDataURL(file);
      });
    }

    var removeFrameBtn = document.getElementById('remove-frame');
    if (removeFrameBtn) {
      removeFrameBtn.addEventListener('click', function () {
        frameOverlayB64 = '';
        var inp = document.getElementById('frame-upload');
        if (inp) inp.value = '';
        var nameEl = document.getElementById('frame-name');
        if (nameEl) nameEl.textContent = '';
        this.classList.add('hidden');
        var noneCard = frameCardsRow.querySelector('[data-frame-overlay="none"]');
        if (noneCard) _setActiveFrameCard(noneCard);
        var uploadRow = document.getElementById('frame-upload-row');
        if (uploadRow) uploadRow.classList.add('hidden');
        schedulePreview();
      });
    }
  }());


  /* ── Live input listeners ────────────────────────────── */
  /* ── contentChanged: content input changed → stale tracking URL ────────── */
  function contentChanged() {
    /* The saved tracking URL is now tied to the old content — discard it so
       the next Generate creates a fresh short_code for the new content. */
    activeTrackingUrl = '';
    activeShortCode   = '';
    schedulePreview();
  }

  var LIVE_IDS = [
    'f-url','f-pdf-url','f-text-content','f-phone-number',
    'f-sms-phone','f-sms-message','f-email-to','f-email-subject','f-email-body',
    'f-first-name','f-last-name','f-vcard-phone','f-vcard-email',
    'f-company','f-job-title','f-vcard-website','f-address',
    'f-ios-url','f-android-url'
  ];
  LIVE_IDS.forEach(function (id) {
    var el = document.getElementById(id); if (el) el.addEventListener('input', contentChanged);
  });
  document.addEventListener('input', function (e) {
    if (e.target.classList.contains('multi-url-input')) contentChanged();
  });

  /* ── Multi-URL buttons ───────────────────────────────── */
  var addUrlBtn = document.getElementById('add-url-btn');
  if (addUrlBtn) addUrlBtn.addEventListener('click', function () {
    var row = document.createElement('div');
    row.className = 'flex gap-2 multi-url-row';
    row.innerHTML = '<div class="flex flex-col gap-1 flex-1">'
      + '<input type="text" placeholder="Link title (optional)" class="multi-url-title qr-input text-sm">'
      + '<input type="url" placeholder="https://" class="multi-url-input qr-input">'
      + '</div>'
      + '<button type="button" class="remove-url-btn self-start mt-1 px-2 text-red-400 hover:text-red-500"><i class="fa fa-times"></i></button>';
    document.getElementById('multi-url-list').appendChild(row);
  });
  document.addEventListener('click', function (e) {
    if (e.target.closest('.remove-url-btn')) {
      e.target.closest('.multi-url-row').remove();
      contentChanged();
    }
  });
  document.addEventListener('input', function (e) {
    if (e.target.classList.contains('multi-url-title')) contentChanged();
  });

  /* ── Build content string ────────────────────────────── */
  function getContent() {
    if (currentType === 'url')   return (document.getElementById('f-url')          || {}).value.trim() || '';
    if (currentType === 'pdf')   return (document.getElementById('f-pdf-url')       || {}).value.trim() || '';
    if (currentType === 'text')  return (document.getElementById('f-text-content')  || {}).value.trim() || '';
    if (currentType === 'phone') {
      var ph = (document.getElementById('f-phone-number') || {}).value.trim();
      return ph ? 'tel:' + ph : '';
    }
    if (currentType === 'multi_url') {
      var rows = document.querySelectorAll('#multi-url-list .multi-url-row');
      var items = [];
      rows.forEach(function (row) {
        var urlInp   = row.querySelector('.multi-url-input');
        var titleInp = row.querySelector('.multi-url-title');
        var v = (urlInp   && urlInp.value.trim())   || '';
        var t = (titleInp && titleInp.value.trim()) || '';
        if (v) items.push({url: v, title: t});
      });
      return items.length ? 'multiurl:' + JSON.stringify(items) : '';
    }
    if (currentType === 'vcard') {
      var fn = ((document.getElementById('f-first-name') || {}).value.trim() + ' '
              + (document.getElementById('f-last-name')  || {}).value.trim()).trim();
      if (!fn) return '';
      var lines = ['BEGIN:VCARD','VERSION:3.0','FN:' + fn];
      var ph2 = (document.getElementById('f-vcard-phone')   || {}).value.trim(); if (ph2) lines.push('TEL:' + ph2);
      var em  = (document.getElementById('f-vcard-email')   || {}).value.trim(); if (em)  lines.push('EMAIL:' + em);
      var ws  = (document.getElementById('f-vcard-website') || {}).value.trim(); if (ws)  lines.push('URL:' + ws);
      var co  = (document.getElementById('f-company')       || {}).value.trim(); if (co)  lines.push('ORG:' + co);
      var jt  = (document.getElementById('f-job-title')     || {}).value.trim(); if (jt)  lines.push('TITLE:' + jt);
      var ad  = (document.getElementById('f-address')       || {}).value.trim(); if (ad)  lines.push('ADR:;;' + ad + ';;;;');
      lines.push('END:VCARD');
      return lines.join('\n');
    }
    if (currentType === 'app') {
      var ios   = (document.getElementById('f-ios-url')     || {}).value.trim();
      var droid = (document.getElementById('f-android-url') || {}).value.trim();
      if (!ios && !droid) return '';
      return 'applink:' + JSON.stringify({ ios: ios, android: droid });
    }
    if (currentType === 'sms') {
      var sph = (document.getElementById('f-sms-phone')   || {}).value.trim();
      if (!sph) return '';
      var msg = (document.getElementById('f-sms-message') || {}).value.trim();
      return msg ? 'SMSTO:' + sph + ':' + msg : 'SMSTO:' + sph;
    }
    if (currentType === 'email') {
      var to   = (document.getElementById('f-email-to')      || {}).value.trim(); if (!to) return '';
      var subj = (document.getElementById('f-email-subject') || {}).value.trim();
      var body = (document.getElementById('f-email-body')    || {}).value.trim();
      var qs = [];
      if (subj) qs.push('subject=' + encodeURIComponent(subj));
      if (body)  qs.push('body='    + encodeURIComponent(body));
      return 'mailto:' + to + (qs.length ? '?' + qs.join('&') : '');
    }
    return '';
  }

  /* ── getOpts ─────────────────────────────────────────── */
  function getOpts(overrides) {
    var rmWmEl   = document.getElementById('remove-watermark');
    var selDot   = document.querySelector('.dot-option.selected');
    var selCorn  = document.querySelector('.corner-option.selected');
    var fgVal    = (document.getElementById('fg-color')  || {}).value || '#000000';
    var bgVal    = (document.getElementById('bg-color')  || {}).value || '#ffffff';
    var eyeVal   = (document.getElementById('eye-color') || {}).value || fgVal;
    var szEl     = document.getElementById('logo-size');
    var mgEl     = document.getElementById('logo-margin');
    var base = {
      dot_style:        selDot  ? selDot.dataset.style   : 'square',
      corner_style:     selCorn ? selCorn.dataset.corner  : 'square',
      fg_color:         fgVal,
      bg_color:         bgVal,
      eye_color:        eyeVal,
      error_correction: currentEC,
      qr_size:          1000,
      logo_b64:         logoB64,
      logo_size:        szEl ? parseInt(szEl.value,  10) : 22,
      logo_margin:      mgEl ? parseInt(mgEl.value,  10) : 0,
      force_watermark:  rmWmEl ? !rmWmEl.checked : false,
      frame_overlay_b64: frameOverlayB64,
    };
    return Object.assign(base, overrides || {});
  }

  /* ── Preview helpers ─────────────────────────────────── */
  function schedulePreview() {
    clearTimeout(previewTimer);
    previewTimer = setTimeout(doPreview, 450);
  }

  function postJSON(url, data) {
    return fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    }).then(function (r) { return r.json(); });
  }

  function showPreviewLoading() {
    var box = document.getElementById('qr-preview-box');
    if (!box || document.getElementById('qr-preview-spinner')) return;
    var sp = document.createElement('div');
    sp.id = 'qr-preview-spinner';
    sp.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);border-radius:12px;z-index:10;';
    sp.innerHTML = '<i class="fa fa-spinner fa-spin text-2xl text-gray-400"></i>';
    box.style.position = 'relative';
    box.appendChild(sp);
  }
  function hidePreviewLoading() {
    var sp = document.getElementById('qr-preview-spinner'); if (sp) sp.remove();
  }

  function doPreview() {
    var content      = getContent();
    var placeholder  = document.getElementById('qr-preview-placeholder');
    var previewImg   = document.getElementById('qr-preview-img');
    var trackBadge   = document.getElementById('tracking-preview-badge');
    var badgeSub     = document.getElementById('tracking-badge-sub');
    var trackScansEl = document.getElementById('track-scans');
    var trackScans   = trackScansEl ? trackScansEl.checked : false;
    if (!content) {
      hidePreviewLoading();
      if (placeholder) placeholder.style.display = '';
      if (previewImg)  previewImg.style.display  = 'none';
      if (trackBadge)  trackBadge.classList.add('hidden');
      return;
    }

    /* When tracking is on and we already have a saved tracking URL, reuse it
       directly — don't ask the backend to generate a new temporary short_code. */
    var previewContent  = content;
    var previewTrack    = trackScans;
    if (trackScans && activeTrackingUrl) {
      previewContent = activeTrackingUrl;
      previewTrack   = false;  /* backend just encodes this URL as-is */
    }

    var opts    = getOpts();
    var payload = Object.assign({ qr_type: currentType, content: previewContent, track_scans: previewTrack }, opts);
    if (previewImg && previewImg.style.display !== 'none') showPreviewLoading();
    postJSON('/qr-code-generator/preview', payload).then(function (r) {
      hidePreviewLoading();
      if (r.svg) {
        lastContent = content;
        if (placeholder) placeholder.style.display = 'none';
        if (previewImg) {
          previewImg.innerHTML = r.svg;
          previewImg.style.display = 'block';
        }
        /* Show/update the tracking badge */
        if (trackBadge) {
          if (trackScans) {
            trackBadge.classList.remove('hidden');
            if (badgeSub) {
              if (activeTrackingUrl && activeShortCode) {
                badgeSub.textContent = '{% trans %}Saved{% endtrans %} — /q/' + activeShortCode + ' \u00b7 {% trans %}scans will be logged{% endtrans %}';
              } else {
                badgeSub.textContent = '{% trans %}Preview only — click Generate to save your tracking link{% endtrans %}';
              }
            }
          } else {
            trackBadge.classList.add('hidden');
          }
        }
      } else if (r.error) {
        if (trackBadge) trackBadge.classList.add('hidden');
        console.error('[QR Preview]', r.error);
      }
    }).catch(function (err) {
      hidePreviewLoading();
      if (trackBadge) trackBadge.classList.add('hidden');
      console.error('[QR Preview]', err);
    });
  }

  /* ── Apply an admin template object ─────────────────── */
  function _applyTemplate(tpl, itemEl) {
    document.querySelectorAll('.tmpl-item').forEach(function (t) { t.classList.remove('active'); });
    if (itemEl) itemEl.classList.add('active');
    _setColor('fg-hex',  'fg-swatch',  'fg-color',  tpl.fg_color  || '#000000');
    _setColor('bg-hex',  'bg-swatch',  'bg-color',  tpl.bg_color  || '#ffffff');
    _setColor('eye-hex', 'eye-swatch', 'eye-color', tpl.eye_color || tpl.fg_color || '#000000');
    _syncLabels();
    document.querySelectorAll('.dot-option').forEach(function (b) {
      b.classList.toggle('selected', b.dataset.style === (tpl.dot_style || 'square'));
    });
    document.querySelectorAll('.corner-option').forEach(function (b) {
      b.classList.toggle('selected', b.dataset.corner === (tpl.corner_style || 'square'));
    });
    logoB64 = tpl.logo_b64 || '';
    currentEC = logoB64 ? 'H' : 'M';
    doPreview();
  }

  /* ── Template scroll ─────────────────────────────────── */
  function _updateTmplScroll() {
    var track = document.getElementById('tmpl-track');
    var vp    = document.getElementById('tmpl-viewport');
    if (!track || !vp) return;
    var vpW     = vp.offsetWidth || 400;
    var visible = Math.max(1, Math.floor(vpW / TMPL_ITEM_W));
    var maxOff  = Math.max(0, _adminTemplates.length - visible);
    tmplScrollOffset = Math.max(0, Math.min(tmplScrollOffset, maxOff));
    track.style.transform = 'translateX(-' + (tmplScrollOffset * TMPL_ITEM_W) + 'px)';
    var prev = document.getElementById('tmpl-prev');
    var next = document.getElementById('tmpl-next');
    if (prev) prev.disabled = tmplScrollOffset === 0;
    if (next) next.disabled = tmplScrollOffset >= maxOff;
  }

  function buildTemplateTabs(templates) {
    _adminTemplates = templates || [];
    var track = document.getElementById('tmpl-track');
    if (!track) return;
    track.innerHTML = '';
    var tmplSection = document.getElementById('tmpl-section');
    if (tmplSection) tmplSection.classList.toggle('hidden', _adminTemplates.length === 0);
    _adminTemplates.forEach(function (tpl) {
      var item = document.createElement('div');
      item.className = 'tmpl-item';
      item.title = tpl.name || '';
      var ph = document.createElement('div');
      ph.className = 'tmpl-item-placeholder';
      ph.style.cssText = 'display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:8px;overflow:hidden;';
      ph.innerHTML = '<i class="fa fa-spinner fa-spin" style="color:#cbd5e1;font-size:11px;"></i>';
      item.appendChild(ph);
      var pOpts = {
        qr_type: 'url',
        content: 'https://example.com',
        fg_color: tpl.fg_color || '#000000', bg_color: tpl.bg_color || '#ffffff',
        eye_color: tpl.eye_color || tpl.fg_color || '#000000',
        dot_style: tpl.dot_style || 'square', corner_style: tpl.corner_style || 'square',
        logo_b64: tpl.logo_b64 || '', logo_size: 22, logo_margin: 0,
        qr_size: 100, frame_overlay_b64: '',
        error_correction: tpl.logo_b64 ? 'H' : 'M', force_watermark: false,
      };
      (function (el, opts) {
        postJSON('/qr-code-generator/preview', opts).then(function (r) {
          if (r.svg) {
            var d2 = document.createElement('div');
            d2.innerHTML = r.svg;
            d2.style.cssText = 'width:62px;height:62px;border-radius:7px;overflow:hidden;flex-shrink:0;';
            el.innerHTML = ''; el.appendChild(d2);
          }
        }).catch(function () {});
      })(ph, pOpts);
      var lbl = document.createElement('div');
      lbl.className = 'tmpl-item-label';
      lbl.textContent = tpl.name || '';
      item.appendChild(lbl);
      item.addEventListener('click', function () { _applyTemplate(tpl, item); });
      track.appendChild(item);
    });
    _updateTmplScroll();
  }

  var tmplPrev = document.getElementById('tmpl-prev');
  var tmplNext = document.getElementById('tmpl-next');
  if (tmplPrev) tmplPrev.addEventListener('click', function () {
    if (tmplScrollOffset > 0) { tmplScrollOffset--; _updateTmplScroll(); }
  });
  if (tmplNext) tmplNext.addEventListener('click', function () {
    tmplScrollOffset++; _updateTmplScroll();
  });

  /* ── Pattern and Style ───────────────────────────────── */
  function buildPatternSection() {
    var track = document.getElementById('patt-track'); if (!track) return;
    track.innerHTML = '';
    PATTERN_OPTIONS.forEach(function (patt, idx) {
      var card = document.createElement('div');
      card.className = 'patt-card' + (idx === activePatternIdx ? ' active' : '');
      card.dataset.idx = idx;
      var ph = document.createElement('div');
      ph.className = 'patt-placeholder';
      ph.style.cssText = 'display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:6px;background:#e2e8f0;';
      ph.innerHTML = '<i class="fa fa-spinner fa-spin" style="color:#94a3b8;font-size:12px;"></i>';
      card.appendChild(ph);
      var lbl = document.createElement('div');
      lbl.className = 'patt-card-label';
      lbl.textContent = patt.label;
      card.appendChild(lbl);
      (function (el, p) {
        postJSON('/qr-code-generator/preview', {
          content: 'https://example.com',
          fg_color: '#000000', bg_color: '#ffffff', eye_color: '#000000',
          dot_style: p.dot, corner_style: p.corner,
          logo_b64: '', logo_size: 22, logo_margin: 0,
          qr_size: 80, frame_style: 'none', frame_label: '',
          error_correction: 'M', force_watermark: false,
        }).then(function (r) {
          if (r.svg) {
            var d = document.createElement('div');
            d.innerHTML = r.svg;
            d.style.cssText = 'width:52px;height:52px;border-radius:6px;overflow:hidden;';
            if (el.firstChild && el.firstChild.className && el.firstChild.className.indexOf('patt-placeholder') >= 0) {
              el.replaceChild(d, el.firstChild);
            }
          }
        }).catch(function () {});
      })(card, patt);
      card.addEventListener('click', function () {
        var pidx = parseInt(this.dataset.idx, 10);
        activePatternIdx = pidx;
        document.querySelectorAll('.patt-card').forEach(function (c) { c.classList.remove('active'); });
        this.classList.add('active');
        var p = PATTERN_OPTIONS[pidx];
        document.querySelectorAll('.dot-option').forEach(function (b) {
          b.classList.toggle('selected', b.dataset.style === p.dot);
        });
        document.querySelectorAll('.corner-option').forEach(function (b) {
          b.classList.toggle('selected', b.dataset.corner === p.corner);
        });
        manualChange();
      });
      track.appendChild(card);
    });
  }

  /* ── Generate button ─────────────────────────────────── */
  document.getElementById('btn-generate').addEventListener('click', function () {
    var content = getContent();
    if (!content) { toastr.warning('{% trans %}Please fill in the required fields.{% endtrans %}'); return; }
    var btn = this;
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>{% trans %}Generating...{% endtrans %}';
    var isDynamic  = document.getElementById('is-dynamic')  ? document.getElementById('is-dynamic').checked  : false;
    var trackScans = document.getElementById('track-scans') ? document.getElementById('track-scans').checked : false;
    var label      = document.getElementById('qr-label')    ? document.getElementById('qr-label').value.trim() : '';
    postJSON('/qr-code-generator/generate', Object.assign({
      qr_type: currentType, content: content,
      is_dynamic: isDynamic, track_scans: trackScans, label: label,
    }, getOpts())).then(function (r) {
      if (r.error) {
        toastr.error(r.error);
      } else {
        /* Store the PNG for clipboard; keep SVG showing in preview for quality */
        lastPng = r.image; lastContent = r.content || content;
        /* If tracking was enabled, save the short_code so the preview reuses it */
        if (trackScans && r.short_code) {
          activeTrackingUrl = r.content || '';
          activeShortCode   = r.short_code || '';
        }
        /* Re-render the crisp SVG preview so quality is never degraded */
        doPreview();
        var ds = document.getElementById('download-section');
        if (ds) ds.classList.remove('hidden');
        var di = document.getElementById('dynamic-info');
        if (di && r.is_dynamic) di.classList.remove('hidden');
        /* Show share panel when a tracking URL is saved */
        var sharePanel = document.getElementById('share-panel');
        var shareInput = document.getElementById('share-url-input');
        if (sharePanel && shareInput && trackScans && r.content) {
          shareInput.value = r.content;
          sharePanel.classList.remove('hidden');
          sharePanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        } else if (sharePanel) {
          sharePanel.classList.add('hidden');
        }
        toastr.success('{% trans %}QR Code generated!{% endtrans %}');
        /* Open the result modal */
        openQrModal(r, trackScans, content);
      }
    }).catch(function () {
      toastr.error('{% trans %}Generation failed{% endtrans %}');
    }).finally(function () {
      btn.disabled = false;
      btn.innerHTML = '<i class="fa fa-qrcode mr-2"></i>{% trans %}Generate QR Code{% endtrans %}';
    });
  });

  /* ── Copy to clipboard ───────────────────────────────── */
  document.getElementById('btn-copy-qr').addEventListener('click', function () {
    /* Clipboard copy requires a true PNG (the SVG live preview cannot be copied as image/png) */
    if (!lastPng) { toastr.warning('{% trans %}Generate a QR code first.{% endtrans %}'); return; }
    var btn = this;
    if (navigator.clipboard && window.ClipboardItem) {
      var base64 = lastPng.split(',')[1];
      var binary = atob(base64);
      var bytes = new Uint8Array(binary.length);
      for (var i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
      navigator.clipboard.write([new ClipboardItem({ 'image/png': new Blob([bytes], { type: 'image/png' }) })])
        .then(function () {
          btn.innerHTML = '<i class="fa fa-check mr-2"></i>{% trans %}Copied!{% endtrans %}';
          setTimeout(function () { btn.innerHTML = '<i class="fa fa-copy mr-2"></i>{% trans %}Copy to Clipboard{% endtrans %}'; }, 2000);
          toastr.success('{% trans %}QR code copied to clipboard!{% endtrans %}');
        }, function () { toastr.error('{% trans %}Copy not supported by your browser{% endtrans %}'); });
    } else {
      var a = document.createElement('a');
      a.href = lastPng; a.download = 'qrcode.png'; a.click();
      toastr.info('{% trans %}Image downloaded (clipboard not supported){% endtrans %}');
    }
  });

  /* ── Copy share URL ──────────────────────────────────── */
  var btnCopyShareUrl = document.getElementById('btn-copy-share-url');
  if (btnCopyShareUrl) {
    btnCopyShareUrl.addEventListener('click', function () {
      var input = document.getElementById('share-url-input');
      if (!input || !input.value) return;
      var btn = this;
      if (navigator.clipboard) {
        navigator.clipboard.writeText(input.value).then(function () {
          btn.innerHTML = '<i class="fa fa-check"></i> {% trans %}Copied!{% endtrans %}';
          setTimeout(function () { btn.innerHTML = '<i class="fa fa-copy"></i> {% trans %}Copy{% endtrans %}'; }, 2000);
        }, function () {
          input.select();
          document.execCommand('copy');
          btn.innerHTML = '<i class="fa fa-check"></i> {% trans %}Copied!{% endtrans %}';
          setTimeout(function () { btn.innerHTML = '<i class="fa fa-copy"></i> {% trans %}Copy{% endtrans %}'; }, 2000);
        });
      } else {
        input.select();
        document.execCommand('copy');
        btn.innerHTML = '<i class="fa fa-check"></i> {% trans %}Copied!{% endtrans %}';
        setTimeout(function () { btn.innerHTML = '<i class="fa fa-copy"></i> {% trans %}Copy{% endtrans %}'; }, 2000);
      }
    });
  }

  /* ── Download buttons ────────────────────────────────── */
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.btn-download'); if (!btn) return;
    var fmt = btn.dataset.fmt;
    if (!lastContent) { toastr.warning('{% trans %}Generate a QR code first.{% endtrans %}'); return; }
    fetch('/qr-code-generator/download', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(Object.assign({ content: lastContent, format: fmt }, getOpts())),
    }).then(function (resp) {
      if (!resp.ok) throw new Error('Download failed');
      return resp.blob();
    }).then(function (blob) {
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url; a.download = 'qrcode.' + fmt;
      document.body.appendChild(a); a.click();
      document.body.removeChild(a);
      setTimeout(function () { URL.revokeObjectURL(url); }, 2000);
    }).catch(function () { toastr.error('{% trans %}Download failed{% endtrans %}'); });
  });

  /* ── Admin asset injection ────────────────────────────── */
  var _adminLogos  = {};

  function _attachLogoCardHandler(btn) {
    btn.addEventListener('click', function () {
      var logo = this.dataset.logo;
      activeLogo = logo;
      document.querySelectorAll('.logo-preset-card').forEach(function (c) {
        if (c.dataset.logo !== undefined) c.classList.remove('active');
      });
      this.classList.add('active');
      var uploadRow = document.getElementById('logo-upload-row');
      if (logo === 'upload') {
        if (uploadRow) uploadRow.classList.remove('hidden');
        var li = document.getElementById('logo-upload');
        if (!li || !li.value) { logoB64 = ''; currentEC = 'M'; schedulePreview(); }
      } else if (logo === 'none') {
        if (uploadRow) uploadRow.classList.add('hidden');
        logoB64 = '';
        currentEC = 'M';
        schedulePreview();
      } else if (logo && logo.indexOf('preset:') === 0) {
        if (uploadRow) uploadRow.classList.add('hidden');
        var pid = logo.split('preset:')[1];
        logoB64 = _adminLogos[pid] || '';
        currentEC = logoB64 ? 'H' : 'M';
        schedulePreview();
      } else {
        if (uploadRow) uploadRow.classList.add('hidden');
        logoB64 = ''; currentEC = 'M'; schedulePreview();
      }
    });
  }

  /* ── Logo carousel nav ── */
  var _logoOffset = 0;
  function _updateLogoNav() {
    var track    = document.getElementById('logo-options-track');
    var viewport = document.getElementById('logo-options-viewport');
    var prevBtn  = document.getElementById('logo-prev-btn');
    var nextBtn  = document.getElementById('logo-next-btn');
    if (!track || !viewport || !prevBtn || !nextBtn) return;
    var trackW   = track.scrollWidth;
    var viewW    = viewport.offsetWidth;
    var overflow = trackW > viewW + 2;
    prevBtn.classList.toggle('hidden', !overflow);
    nextBtn.classList.toggle('hidden', !overflow);
    if (!overflow) { _logoOffset = 0; track.style.transform = 'translateX(0)'; }
    /* clamp offset */
    var maxOff = Math.max(0, trackW - viewW);
    _logoOffset = Math.max(0, Math.min(_logoOffset, maxOff));
    track.style.transform = 'translateX(-' + _logoOffset + 'px)';
    prevBtn.disabled = _logoOffset <= 0;
    nextBtn.disabled = _logoOffset >= maxOff;
  }
  document.getElementById('logo-prev-btn') && document.getElementById('logo-prev-btn').addEventListener('click', function () {
    var viewport = document.getElementById('logo-options-viewport');
    _logoOffset = Math.max(0, _logoOffset - (viewport ? viewport.offsetWidth * 0.7 : 200));
    _updateLogoNav();
  });
  document.getElementById('logo-next-btn') && document.getElementById('logo-next-btn').addEventListener('click', function () {
    var track    = document.getElementById('logo-options-track');
    var viewport = document.getElementById('logo-options-viewport');
    var maxOff   = track && viewport ? Math.max(0, track.scrollWidth - viewport.offsetWidth) : 0;
    _logoOffset  = Math.min(maxOff, _logoOffset + (viewport ? viewport.offsetWidth * 0.7 : 200));
    _updateLogoNav();
  });
  window.addEventListener('resize', _updateLogoNav);

  /* Re-attach handlers to all static logo preset cards */
  document.querySelectorAll('.logo-preset-card[data-logo]').forEach(_attachLogoCardHandler);

  /* Fetch admin assets */
  fetch('/qr-code-generator/assets').then(function (r) { return r.ok ? r.json() : null; }).then(function (data) {
    if (!data) return;
    /* ── Logo presets ── */
    var logoTrack = document.getElementById('logo-options-track');
    if (logoTrack && data.logos && data.logos.length) {
      data.logos.forEach(function (logo) {
        _adminLogos[logo.id] = logo.b64;
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'logo-preset-card';
        btn.dataset.logo = 'preset:' + logo.id;
        var thumb = document.createElement('div');
        thumb.className = 'logo-preset-thumb';
        var img = document.createElement('img');
        img.src = logo.b64;
        img.style.cssText = 'width:32px;height:32px;object-fit:contain;border-radius:4px;';
        thumb.appendChild(img);
        var lbl = document.createElement('span');
        lbl.textContent = logo.name || 'Logo';
        btn.appendChild(thumb);
        btn.appendChild(lbl);
        _attachLogoCardHandler(btn);
        logoTrack.appendChild(btn);
      });
      /* Show/hide nav buttons after adding presets */
      _updateLogoNav();
    }
    /* ── Frame overlays (inject before the upload card) ── */
    var frameCardsRow = document.getElementById('frame-cards-row');
    if (frameCardsRow && data.frames && data.frames.length) {
      var adminLbl = document.getElementById('frame-admin-label');
      if (adminLbl) adminLbl.classList.remove('hidden');
      var uploadCard = frameCardsRow.querySelector('[data-frame-overlay="upload"]');
      data.frames.forEach(function (frame) {
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'logo-preset-card';
        btn.dataset.frameOverlay = frame.id;
        btn.dataset.b64 = frame.b64 || '';
        var thumb = document.createElement('div');
        thumb.className = 'logo-preset-thumb';
        var img = document.createElement('img');
        img.src = frame.b64 || '';
        img.style.cssText = 'width:32px;height:32px;object-fit:contain;border-radius:4px;';
        thumb.appendChild(img);
        var lbl = document.createElement('span');
        lbl.textContent = frame.name || 'Frame';
        btn.appendChild(thumb);
        btn.appendChild(lbl);
        if (uploadCard) {
          frameCardsRow.insertBefore(btn, uploadCard);
        } else {
          frameCardsRow.appendChild(btn);
        }
      });
    }
    /* ── Templates ── */
    buildTemplateTabs(data.templates || []);
  }).catch(function () {});

  /* ── QR Result Modal ─────────────────────────────────── */
  var QR_TYPE_LABELS = {
    url: 'URL QR Code', pdf: 'PDF QR Code', multi_url: 'Multi-URL QR Code',
    vcard: 'Contact / vCard QR Code', text: 'Text QR Code', app: 'App QR Code',
    sms: 'SMS QR Code', email: 'Email QR Code', phone: 'Phone QR Code',
  };

  function openQrModal(r, trackScans, rawContent) {
    var modal = document.getElementById('qr-result-modal');
    if (!modal) return;

    /* Copy QR image from the live preview into the modal */
    var previewEl = document.getElementById('qr-preview-img');
    var imgWrap   = document.getElementById('qr-modal-img-wrap');
    if (imgWrap && previewEl) {
      imgWrap.innerHTML = previewEl.innerHTML;
    }

    /* Type label */
    var typeLabel = document.getElementById('qr-modal-type-label');
    if (typeLabel) typeLabel.textContent = QR_TYPE_LABELS[currentType] || (currentType.toUpperCase() + ' QR Code');

    /* URL field — show tracking URL when available, otherwise raw content */
    var urlInput = document.getElementById('qr-modal-url-input');
    if (urlInput) {
      urlInput.value = (trackScans && r.content) ? r.content : (rawContent || '');
      urlInput.type = 'text';
    }

    /* Footer — show only when tracking + logged in */
    var footer = document.getElementById('qr-modal-footer');
    if (footer) {
      if (trackScans && r.short_code) {
        document.getElementById('qr-modal-scan-count').textContent = '0';
        footer.classList.remove('hidden');
      } else {
        footer.classList.add('hidden');
      }
    }

    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }

  function closeQrModal() {
    var modal = document.getElementById('qr-result-modal');
    if (modal) modal.classList.add('hidden');
    document.body.style.overflow = '';
  }

  /* Close on X button */
  var modalCloseBtn = document.getElementById('qr-modal-close');
  if (modalCloseBtn) modalCloseBtn.addEventListener('click', closeQrModal);

  /* Close on backdrop click */
  var qrModal = document.getElementById('qr-result-modal');
  if (qrModal) {
    qrModal.addEventListener('click', function (e) {
      if (e.target === qrModal) closeQrModal();
    });
  }

  /* Close on Escape key */
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeQrModal();
  });

  /* Eye toggle — show/hide the URL input value */
  var eyeBtn = document.getElementById('qr-modal-eye-btn');
  if (eyeBtn) {
    eyeBtn.addEventListener('click', function () {
      var inp = document.getElementById('qr-modal-url-input');
      if (!inp) return;
      var icon = this.querySelector('i');
      if (inp.type === 'text') {
        inp.type = 'password';
        if (icon) { icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); }
      } else {
        inp.type = 'text';
        if (icon) { icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); }
      }
    });
  }

  /* Modal download button */
  var modalDlBtn = document.getElementById('qr-modal-download-btn');
  if (modalDlBtn) {
    modalDlBtn.addEventListener('click', function () {
      if (!lastContent) { toastr.warning('{% trans %}Generate a QR code first.{% endtrans %}'); return; }
      var fmt  = (document.getElementById('qr-modal-fmt')  || {}).value || 'png';
      var size = parseInt((document.getElementById('qr-modal-size') || {}).value || '1000', 10);
      var btn  = this;
      btn.disabled = true;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>{% trans %}Downloading...{% endtrans %}';
      fetch('/qr-code-generator/download', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(Object.assign({ content: lastContent, format: fmt }, getOpts({ qr_size: size }))),
      }).then(function (resp) {
        if (!resp.ok) throw new Error('fail');
        return resp.blob();
      }).then(function (blob) {
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url; a.download = 'qrcode.' + fmt;
        document.body.appendChild(a); a.click();
        document.body.removeChild(a);
        setTimeout(function () { URL.revokeObjectURL(url); }, 2000);
      }).catch(function () {
        toastr.error('{% trans %}Download failed{% endtrans %}');
      }).finally(function () {
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-download mr-1"></i>{% trans %}Download{% endtrans %}';
      });
    });
  }

  /* Modal copy button */
  var modalCopyBtn = document.getElementById('qr-modal-copy-btn');
  if (modalCopyBtn) {
    modalCopyBtn.addEventListener('click', function () {
      if (!lastPng) { toastr.warning('{% trans %}Generate a QR code first.{% endtrans %}'); return; }
      var btn = this;
      if (navigator.clipboard && window.ClipboardItem) {
        var base64 = lastPng.split(',')[1];
        var binary = atob(base64);
        var bytes  = new Uint8Array(binary.length);
        for (var i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
        navigator.clipboard.write([new ClipboardItem({ 'image/png': new Blob([bytes], { type: 'image/png' }) })])
          .then(function () {
            btn.innerHTML = '<i class="fa fa-check text-green-500 text-sm"></i>';
            setTimeout(function () { btn.innerHTML = '<i class="fa fa-copy text-gray-600 dark:text-gray-300 text-sm"></i>'; }, 2000);
            toastr.success('{% trans %}QR code copied to clipboard!{% endtrans %}');
          }, function () { toastr.error('{% trans %}Copy not supported by your browser{% endtrans %}'); });
      } else {
        var a = document.createElement('a');
        a.href = lastPng; a.download = 'qrcode.png'; a.click();
        toastr.info('{% trans %}Image downloaded (clipboard not supported){% endtrans %}');
      }
    });
  }

  /* ── Init ────────────────────────────────────────────── */
  buildTemplateTabs([]);
  buildPatternSection();
  schedulePreview();
})();
</script>
{% endblock %}