{% extends "admin/layout.html" %}
{% block title %}QR Code Settings – Admin{% endblock %}
{% block body %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white"><i class="fa fa-qrcode mr-2 text-primary"></i>{% trans %}QR Code Generator Settings{% endtrans %}</h1>
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Configure the public QR code generator page, feature flags, and view usage stats.{% endtrans %}</p>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Stats cards -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Total QR Codes{% endtrans %}</p>
        <p class="text-3xl font-bold text-primary">{{ total_codes }}</p>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Total Scans Recorded{% endtrans %}</p>
        <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ total_scans }}</p>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Dynamic QR Codes{% endtrans %}</p>
        <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ dynamic_codes }}</p>
    </div>
</div>

<form method="POST" action="{{ full_url('/admin/qr-settings') }}">

<!-- General Settings -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-5">
    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">{% trans %}General{% endtrans %}</p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_enabled" id="qr-enabled" value="1" {% if qr_settings.get('qr_enabled','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-enabled" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Enable QR Code Generator{% endtrans %}</label>
        </div>

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_allow_dynamic" id="qr-allow-dynamic" value="1" {% if qr_settings.get('qr_allow_dynamic','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-allow-dynamic" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Allow Dynamic QR Codes{% endtrans %}</label>
        </div>

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_allow_tracking" id="qr-allow-tracking" value="1" {% if qr_settings.get('qr_allow_tracking','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-allow-tracking" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Allow Scan Tracking{% endtrans %}</label>
        </div>

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_allow_logo" id="qr-allow-logo" value="1" {% if qr_settings.get('qr_allow_logo','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-allow-logo" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Allow Logo/Icon Upload{% endtrans %}</label>
        </div>

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_allow_svg" id="qr-allow-svg" value="1" {% if qr_settings.get('qr_allow_svg','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-allow-svg" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Allow SVG Download{% endtrans %}</label>
        </div>

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_allow_pdf_download" id="qr-allow-pdf" value="1" {% if qr_settings.get('qr_allow_pdf_download','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-allow-pdf" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Allow PDF Download{% endtrans %}</label>
        </div>

        <div class="flex items-center gap-3 pt-1">
            <input type="checkbox" name="qr_allow_png" id="qr-allow-png" value="1" {% if qr_settings.get('qr_allow_png','1') == '1' %}checked{% endif %} class="rounded">
            <label for="qr-allow-png" class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Allow PNG Download{% endtrans %}</label>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Default Error Correction{% endtrans %}</label>
            <select name="qr_default_error_correction" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
                {% for val, lbl in [('L','L — 7%'),('M','M — 15%'),('Q','Q — 25%'),('H','H — 30%')] %}
                <option value="{{ val }}" {% if qr_settings.get('qr_default_error_correction','M') == val %}selected{% endif %}>{{ lbl }}</option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Default QR Size (px){% endtrans %}</label>
            <input type="number" name="qr_default_size" value="{{ qr_settings.get('qr_default_size','300') }}" min="100" max="2000" step="50"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Label Length{% endtrans %}</label>
            <input type="number" name="qr_max_label_length" value="{{ qr_settings.get('qr_max_label_length','100') }}" min="10" max="500"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Tracking Page Footer Name{% endtrans %}</label>
            <input type="text" name="qr_redirect_footer_name" value="{{ qr_settings.get('qr_redirect_footer_name','') }}" placeholder="e.g. My Company"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Tracking Page Footer URL{% endtrans %}</label>
            <input type="url" name="qr_redirect_footer_url" value="{{ qr_settings.get('qr_redirect_footer_url','') }}" placeholder="https://example.com"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
        </div>

        <div class="sm:col-span-2">
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}QR Tracking Domain{% endtrans %}</label>
            <input type="url" name="qr_tracking_domain" value="{{ qr_settings.get('qr_tracking_domain','') }}" placeholder="https://qr.yourdomain.com"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Set up a CNAME pointing to this server. Leave blank to use the current server URL. Existing codes are unaffected.{% endtrans %}</p>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Scan Token TTL (seconds){% endtrans %}</label>
            <input type="number" name="qr_scan_token_ttl" value="{{ qr_settings.get('qr_scan_token_ttl','0') }}" min="0" placeholder="0"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
            <p class="text-xs text-amber-600 dark:text-amber-400 mt-1">{% trans %}0 = disabled. Only enable for screen-displayed QR codes — printed QR codes will permanently stop working once the TTL expires.{% endtrans %}</p>
        </div>

        <div class="sm:col-span-2">
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Page Title (shown in hero){% endtrans %}</label>
            <input type="text" name="qr_page_title" value="{{ qr_settings.get('qr_page_title','Free QR Code Generator') }}"
                class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
        </div>

        <div class="sm:col-span-2 lg:col-span-3">
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Page Description{% endtrans %}</label>
            <textarea name="qr_page_description" rows="2" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none resize-none">{{ qr_settings.get('qr_page_description','') }}</textarea>
        </div>

        <div class="sm:col-span-2 lg:col-span-3">
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">{% trans %}Watermark Mode{% endtrans %}</label>
            <div class="flex gap-4 mb-2">
                <label class="flex items-center gap-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
                    <input type="radio" name="qr_watermark_type" value="text" {% if qr_settings.get('qr_watermark_type','text') == 'text' %}checked{% endif %} onchange="document.getElementById('wm-logo-row').classList.add('hidden');document.getElementById('wm-text-row').classList.remove('hidden')">
                    {% trans %}Text Watermark{% endtrans %}
                </label>
                <label class="flex items-center gap-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
                    <input type="radio" name="qr_watermark_type" value="logo" {% if qr_settings.get('qr_watermark_type','text') == 'logo' %}checked{% endif %} onchange="document.getElementById('wm-logo-row').classList.remove('hidden');document.getElementById('wm-text-row').classList.add('hidden')">
                    {% trans %}Logo Watermark{% endtrans %}
                </label>
            </div>
            <div id="wm-text-row" {% if qr_settings.get('qr_watermark_type','text') == 'logo' %}class="hidden"{% endif %}>
                <input type="text" name="qr_watermark_text" value="{{ qr_settings.get('qr_watermark_text','') }}" placeholder="{% trans %}e.g. yoursite.com{% endtrans %}"
                    class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
                <p class="text-xs text-gray-400 mt-1">{% trans %}Added to bottom-right corner of all free QR images. Leave blank to disable.{% endtrans %}</p>
            </div>
            <div id="wm-logo-row" {% if qr_settings.get('qr_watermark_type','text') != 'logo' %}class="hidden"{% endif %}>
                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">{% trans %}Upload a logo to stamp in the corner. Optional text label shown beside it.{% endtrans %}</p>
                <div class="flex flex-wrap gap-3 items-center">
                    {% if qr_settings.get('qr_watermark_logo_path') %}
                    <div class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
                        <img src="/static/{{ qr_settings.get('qr_watermark_logo_path','').replace('static/','') }}" alt="WM" class="w-10 h-10 object-contain rounded">
                        <span class="text-xs text-gray-500">{% trans %}Current logo{% endtrans %}</span>
                    </div>
                    {% endif %}
                    <div>
                        <label class="text-xs font-medium text-gray-600 dark:text-gray-400">{% trans %}Replace / Upload Logo{% endtrans %}</label>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- QR Type Toggles -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-5">
    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">{% trans %}Enabled QR Code Types{% endtrans %}</p>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
        {% set qr_types_list = [
            ('qr_type_url', 'URL'),
            ('qr_type_pdf', 'PDF'),
            ('qr_type_multi_url', 'Multi-URL'),
            ('qr_type_vcard', 'Contact / vCard'),
            ('qr_type_text', 'Plain Text'),
            ('qr_type_app', 'App Links'),
            ('qr_type_sms', 'SMS'),
            ('qr_type_email', 'Email'),
            ('qr_type_phone', 'Phone'),
        ] %}
        {% for key, label in qr_types_list %}
        <div class="flex items-center gap-2">
            <input type="checkbox" name="{{ key }}" id="{{ key }}" value="1"
                {% if qr_settings.get(key, '1') == '1' %}checked{% endif %} class="rounded">
            <label for="{{ key }}" class="text-sm text-gray-700 dark:text-gray-300">{{ label }}</label>
        </div>
        {% endfor %}
    </div>
</div>

<div class="flex gap-3">
    <button type="submit" class="px-5 py-2.5 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all">
        <i class="fa fa-save mr-1"></i>{% trans %}Save Settings{% endtrans %}
    </button>
    <a href="/qr-code-generator" target="_blank" class="px-5 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
        <i class="fa fa-external-link mr-1"></i>{% trans %}View Public Page{% endtrans %}
    </a>
</div>
</form>

<!-- Watermark Logo Upload -->
<div class="mt-6 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-5">
    <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">{% trans %}Watermark Logo (for Logo mode){% endtrans %}</p>
    <form method="POST" action="{{ full_url('/admin/qr-assets/save-watermark') }}" enctype="multipart/form-data">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Watermark Mode{% endtrans %}</label>
                <div class="flex gap-4">
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="radio" name="qr_watermark_type" value="text" {% if qr_settings.get('qr_watermark_type','text') == 'text' %}checked{% endif %}> {% trans %}Text{% endtrans %}
                    </label>
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="radio" name="qr_watermark_type" value="logo" {% if qr_settings.get('qr_watermark_type','text') == 'logo' %}checked{% endif %}> {% trans %}Logo{% endtrans %}
                    </label>
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Watermark Text (shown next to logo, or used for text mode){% endtrans %}</label>
                <input type="text" name="qr_watermark_text" value="{{ qr_settings.get('qr_watermark_text','') }}" placeholder="e.g. TQRCG"
                    class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
            </div>
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Watermark Logo Image (transparent PNG recommended){% endtrans %}</label>
                <div class="flex flex-wrap gap-3 items-center">
                    {% if qr_settings.get('qr_watermark_logo_path') %}
                    <div class="flex items-center gap-2 p-2 rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20">
                        <img src="{{ full_url('/static/' + qr_settings.get('qr_watermark_logo_path','').lstrip('static/')) }}" alt="WM Logo" class="w-12 h-12 object-contain rounded bg-white">
                        <span class="text-xs text-green-700 dark:text-green-400"><i class="fa fa-check mr-1"></i>{% trans %}Logo uploaded{% endtrans %}</span>
                    </div>
                    {% endif %}
                    <input type="file" name="wm_logo_file" accept="image/png,image/jpeg,image/gif,image/webp"
                        class="text-sm text-gray-600 dark:text-gray-400 file:mr-2 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:bg-primary file:text-white cursor-pointer">
                </div>
            </div>
        </div>
        <div class="mt-3">
            <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all">
                <i class="fa fa-save mr-1"></i>{% trans %}Save Watermark Settings{% endtrans %}
            </button>
        </div>
    </form>
</div>

<!-- Logo Library -->
<div class="mt-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-5">
    <div class="flex items-center justify-between mb-4">
        <div>
            <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Logo Library{% endtrans %}</p>
            <p class="text-xs text-gray-400 mt-0.5">{% trans %}Logos uploaded here appear as preset choices on the QR generator page.{% endtrans %}</p>
        </div>
    </div>
    <!-- Existing logos -->
    {% set logo_presets = qr_settings.get('qr_logo_presets', []) %}
    {% if logo_presets %}
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-4">
        {% for logo in logo_presets %}
        <div class="relative group rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-2 flex flex-col items-center gap-1">
            <img src="{{ full_url('/qr-code-generator/asset-file/logos/' + logo.get('file','')) }}" alt="{{ logo.get('name','') }}"
                class="w-14 h-14 object-contain rounded" onerror="this.src='data:image/svg+xml,<svg/>'">
            <span class="text-xs text-center text-gray-600 dark:text-gray-400 truncate w-full text-center">{{ logo.get('name','') }}</span>
            <form method="POST" action="{{ full_url('/admin/qr-assets/delete-logo') }}" class="absolute top-1 right-1 hidden group-hover:block" onsubmit="return confirm('Delete this logo?')">
                <input type="hidden" name="logo_id" value="{{ logo.get('id','') }}">
                <button type="submit" class="w-5 h-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center hover:bg-red-600">
                    <i class="fa fa-times"></i>
                </button>
            </form>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-gray-400 mb-4">{% trans %}No logos uploaded yet.{% endtrans %}</p>
    {% endif %}
    <!-- Upload form -->
    <form method="POST" action="{{ full_url('/admin/qr-assets/upload-logo') }}" enctype="multipart/form-data">
        <div class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Logo Name{% endtrans %}</label>
                <input type="text" name="name" placeholder="{% trans %}e.g. Instagram{% endtrans %}"
                    class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none w-40">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Logo File (PNG/JPG/SVG/WebP){% endtrans %}</label>
                <input type="file" name="file" accept="image/*" required
                    class="text-sm text-gray-600 dark:text-gray-400 file:mr-2 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-xs file:bg-primary file:text-white cursor-pointer">
            </div>
            <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold">
                <i class="fa fa-upload mr-1"></i>{% trans %}Upload Logo{% endtrans %}
            </button>
        </div>
    </form>
</div>

<!-- Frame Library -->
<div class="mt-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-5">
    <div class="flex items-center justify-between mb-4">
        <div>
            <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}Frame Library{% endtrans %}</p>
            <p class="text-xs text-gray-400 mt-0.5">{% trans %}Upload transparent PNG frames. They are composited over the QR code as overlays.{% endtrans %}</p>
        </div>
    </div>
    {% set frame_presets = qr_settings.get('qr_frame_presets', []) %}
    {% if frame_presets %}
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 mb-4">
        {% for frame in frame_presets %}
        <div class="relative group rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-2 flex flex-col items-center gap-1">
            <div class="w-20 h-20 bg-white dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden">
                <img src="{{ full_url('/qr-code-generator/asset-file/frames/' + frame.get('file','')) }}" alt="{{ frame.get('name','') }}"
                    class="w-full h-full object-contain" onerror="this.style.opacity=0.3">
            </div>
            <span class="text-xs text-center text-gray-600 dark:text-gray-400 truncate w-full text-center">{{ frame.get('name','') }}</span>
            <form method="POST" action="{{ full_url('/admin/qr-assets/delete-frame') }}" class="absolute top-1 right-1 hidden group-hover:block" onsubmit="return confirm('Delete this frame?')">
                <input type="hidden" name="frame_id" value="{{ frame.get('id','') }}">
                <button type="submit" class="w-5 h-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center hover:bg-red-600">
                    <i class="fa fa-times"></i>
                </button>
            </form>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-gray-400 mb-4">{% trans %}No frames uploaded yet.{% endtrans %}</p>
    {% endif %}
    <form method="POST" action="{{ full_url('/admin/qr-assets/upload-frame') }}" enctype="multipart/form-data">
        <div class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Frame Name{% endtrans %}</label>
                <input type="text" name="name" placeholder="{% trans %}e.g. Classic Border{% endtrans %}"
                    class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none w-44">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Frame File (transparent PNG recommended){% endtrans %}</label>
                <input type="file" name="file" accept="image/png,image/gif,image/jpeg,image/webp" required
                    class="text-sm text-gray-600 dark:text-gray-400 file:mr-2 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-xs file:bg-primary file:text-white cursor-pointer">
            </div>
            <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold">
                <i class="fa fa-upload mr-1"></i>{% trans %}Upload Frame{% endtrans %}
            </button>
        </div>
    </form>
</div>

<!-- QR Template Library -->
<div class="mt-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-5">
    <div class="flex items-center justify-between mb-4">
        <div>
            <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{% trans %}QR Template Library{% endtrans %}</p>
            <p class="text-xs text-gray-400 mt-0.5">{% trans %}Templates appear on the generator page as one-click presets users can apply and further customise.{% endtrans %}</p>
        </div>
    </div>

    <!-- Template data for JS (safe JSON in script tag, no attribute escaping) -->
    <script type="application/json" id="qr-tpl-data">{{ qr_settings.get('qr_templates', [])|tojson }}</script>

    <!-- Existing templates grid -->
    {% set qr_tpls = qr_settings.get('qr_templates', []) %}
    {% set logo_map = {} %}
    {% for lp in qr_settings.get('qr_logo_presets', []) %}{% set _ = logo_map.update({lp.id: lp.name}) %}{% endfor %}
    {% if qr_tpls %}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 mb-5">
        {% for tpl in qr_tpls %}
        <div class="relative group rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-3">
            <!-- Color preview -->
            <div class="flex items-center gap-2 mb-2">
                <div class="w-6 h-6 rounded-full border border-gray-300" style="background:{{ tpl.get('bg_color','#fff') }};" title="BG"></div>
                <div class="w-6 h-6 rounded-full border border-gray-300" style="background:{{ tpl.get('fg_color','#000') }};" title="FG"></div>
                <div class="w-6 h-6 rounded-full border border-gray-300" style="background:{{ tpl.get('eye_color','#000') }};" title="Eye"></div>
                <span class="text-xs text-gray-500 ml-1">{{ tpl.get('dot_style','square') }}</span>
            </div>
            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">{{ tpl.get('name','Template') }}</p>
            <p class="text-xs text-gray-400">EC: {{ tpl.get('error_correction','M') }} · Corner: {{ tpl.get('corner_style','square') }}
            {% if tpl.get('logo_id') %} · Logo: {{ logo_map.get(tpl.get('logo_id',''), tpl.get('logo_id','')) }}{% endif %}
            </p>
            <!-- Edit + Delete -->
            <div class="flex gap-2 mt-2">
                <button type="button" class="edit-tpl-btn text-xs px-2 py-1 rounded bg-gray-200 dark:bg-gray-700 hover:bg-primary hover:text-white transition"
                    data-tpl-id="{{ tpl.get('id','') }}">
                    <i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}
                </button>
                <form method="POST" action="{{ full_url('/admin/qr-assets/delete-template') }}" onsubmit="return confirm('Delete this template?')">
                    <input type="hidden" name="template_id" value="{{ tpl.get('id','') }}">
                    <button type="submit" class="text-xs px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-500 hover:text-white transition">
                        <i class="fa fa-trash"></i> {% trans %}Delete{% endtrans %}
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-gray-400 mb-4">{% trans %}No templates created yet.{% endtrans %}</p>
    {% endif %}

    <!-- Create / Edit form -->
    <div class="rounded-xl border border-dashed border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 p-4" id="tpl-form-wrap">
        <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3" id="tpl-form-title">{% trans %}Create New Template{% endtrans %}</p>
        <form method="POST" action="{{ full_url('/admin/qr-assets/save-template') }}" id="tpl-form" enctype="multipart/form-data">
            <input type="hidden" name="template_id" id="tpl-form-id" value="">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Template Name{% endtrans %}</label>
                    <input type="text" name="name" id="tpl-name" required placeholder="e.g. Brand Blue"
                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Background Colour{% endtrans %}</label>
                    <div class="flex gap-2">
                        <input type="color" name="bg_color" id="tpl-bg" value="#ffffff" class="w-10 h-9 rounded border border-gray-300 cursor-pointer p-0.5">
                        <input type="text" id="tpl-bg-hex" value="#ffffff" maxlength="7" oninput="syncHexToColor('tpl-bg','tpl-bg-hex')" class="flex-1 px-2 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm outline-none">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}QR Colour (Pixels){% endtrans %}</label>
                    <div class="flex gap-2">
                        <input type="color" name="fg_color" id="tpl-fg" value="#000000" class="w-10 h-9 rounded border border-gray-300 cursor-pointer p-0.5">
                        <input type="text" id="tpl-fg-hex" value="#000000" maxlength="7" oninput="syncHexToColor('tpl-fg','tpl-fg-hex')" class="flex-1 px-2 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm outline-none">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Eye Colour{% endtrans %}</label>
                    <div class="flex gap-2">
                        <input type="color" name="eye_color" id="tpl-eye" value="#000000" class="w-10 h-9 rounded border border-gray-300 cursor-pointer p-0.5">
                        <input type="text" id="tpl-eye-hex" value="#000000" maxlength="7" oninput="syncHexToColor('tpl-eye','tpl-eye-hex')" class="flex-1 px-2 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm outline-none">
                    </div>
                </div>
                <div class="sm:col-span-2 lg:col-span-3">
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">{% trans %}Pattern and Style{% endtrans %}</label>
                    <input type="hidden" name="dot_style"    id="tpl-dot"    value="square">
                    <input type="hidden" name="corner_style" id="tpl-corner" value="square">
                    <div class="flex flex-wrap gap-2" id="tpl-patt-track"></div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Error Correction{% endtrans %}</label>
                    <select name="error_correction" id="tpl-ec" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white outline-none">
                        <option value="L">L – 7%</option>
                        <option value="M" selected>M – 15%</option>
                        <option value="Q">Q – 25%</option>
                        <option value="H">H – 30% (use with logos)</option>
                    </select>
                </div>
                <div class="sm:col-span-2 lg:col-span-3">
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Template Logo (admin only · not shown in frontend logo section){% endtrans %}</label>
                    <!-- Current logo preview (shown when editing) -->
                    <div id="tpl-logo-current" class="hidden mb-2 flex items-center gap-3 p-2 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 w-fit">
                        <img id="tpl-logo-preview-img" src="" alt="current logo" class="w-10 h-10 object-contain rounded">
                        <span class="text-xs text-gray-500">{% trans %}Current logo{% endtrans %}</span>
                        <label class="flex items-center gap-1 text-xs text-red-500 cursor-pointer">
                            <input type="checkbox" name="remove_tpl_logo" id="tpl-logo-remove" value="1" class="mr-0.5">
                            {% trans %}Remove{% endtrans %}
                        </label>
                    </div>
                    <input type="file" name="tpl_logo_file" id="tpl-logo-upload" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
                        class="text-sm text-gray-600 dark:text-gray-400 file:mr-2 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-xs file:bg-primary file:text-white cursor-pointer">
                    <p class="text-xs text-gray-400 mt-1">{% trans %}Upload a logo only for this template. PNG/SVG with transparency recommended.{% endtrans %}</p>
                </div>
            </div>
            <!-- Live QR preview -->
            <div class="mb-4">
                <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">{% trans %}Live Preview{% endtrans %}</p>
                <div id="tpl-qr-preview" class="w-40 h-40 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center justify-center overflow-hidden">
                    <span class="text-xs text-gray-400">{% trans %}Preview loads…{% endtrans %}</span>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold">
                    <i class="fa fa-save mr-1"></i><span id="tpl-btn-label">{% trans %}Save Template{% endtrans %}</span>
                </button>
                <button type="button" onclick="adminResetTemplateForm()" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800">
                    {% trans %}Cancel{% endtrans %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function syncHexToColor(colorId, hexId) {
    var hexEl = document.getElementById(hexId);
    var colEl = document.getElementById(colorId);
    if (!hexEl || !colEl) return;
    var val = hexEl.value.trim();
    if (!/^#/.test(val)) val = '#' + val;
    if (/^#[0-9a-fA-F]{6}$/.test(val)) colEl.value = val;
}
document.querySelectorAll('input[type=color]').forEach(function (c) {
    var hexId = c.id + '-hex';
    c.addEventListener('input', function () {
        var hx = document.getElementById(hexId);
        if (hx) hx.value = this.value;
    });
});
function adminEditTemplate(tpl) {
    document.getElementById('tpl-form-id').value = tpl.id || '';
    document.getElementById('tpl-name').value    = tpl.name || '';
    var bg  = tpl.bg_color  || '#ffffff';
    var fg  = tpl.fg_color  || '#000000';
    var eye = tpl.eye_color || '#000000';
    document.getElementById('tpl-bg').value  = bg;  document.getElementById('tpl-bg-hex').value  = bg;
    document.getElementById('tpl-fg').value  = fg;  document.getElementById('tpl-fg-hex').value  = fg;
    document.getElementById('tpl-eye').value = eye; document.getElementById('tpl-eye-hex').value = eye;
    _selectTplPatt(tpl.dot_style || 'square', tpl.corner_style || 'square');
    document.getElementById('tpl-ec').value     = tpl.error_correction || 'M';
    var logoCurrent  = document.getElementById('tpl-logo-current');
    var logoPreviewImg = document.getElementById('tpl-logo-preview-img');
    var logoRemove   = document.getElementById('tpl-logo-remove');
    if (tpl.tpl_logo_file && logoCurrent && logoPreviewImg) {
        logoPreviewImg.src = '/qr-code-generator/asset-file/tpl-logos/' + tpl.tpl_logo_file;
        logoCurrent.classList.remove('hidden');
        if (logoRemove) logoRemove.checked = false;
    } else if (logoCurrent) {
        logoCurrent.classList.add('hidden');
        if (logoRemove) logoRemove.checked = false;
    }
    document.getElementById('tpl-form-title').textContent = 'Edit Template';
    document.getElementById('tpl-btn-label').textContent  = 'Update Template';
    document.getElementById('tpl-form-wrap').scrollIntoView({behavior:'smooth', block:'nearest'});
}
function adminResetTemplateForm() {
    document.getElementById('tpl-form').reset();
    document.getElementById('tpl-form-id').value = '';
    document.getElementById('tpl-form-title').textContent = 'Create New Template';
    document.getElementById('tpl-btn-label').textContent  = 'Save Template';
    ['tpl-bg-hex','tpl-fg-hex','tpl-eye-hex'].forEach(function (id) {
        var el = document.getElementById(id);
        var co = document.getElementById(id.replace('-hex',''));
        if (el && co) el.value = co.value;
    });
    var logoCurrent = document.getElementById('tpl-logo-current');
    if (logoCurrent) logoCurrent.classList.add('hidden');
    _selectTplPatt('square', 'square');
}
/* Build template map from embedded JSON (avoids any HTML-attribute escaping) */
var _tplMap = {};
(function () {
    var el = document.getElementById('qr-tpl-data');
    if (!el) return;
    try {
        var arr = JSON.parse(el.textContent);
        arr.forEach(function (t) { _tplMap[t.id] = t; });
    } catch (err) { console.error('qr-tpl-data parse error', err); }
}());
document.addEventListener('click', function (e) {
    var btn = e.target.closest('.edit-tpl-btn');
    if (!btn) return;
    var tpl = _tplMap[btn.dataset.tplId];
    if (tpl) adminEditTemplate(tpl);
    else console.warn('Template not found for id:', btn.dataset.tplId);
});

/* ── Pattern options (same set as the frontend) ──────────────────── */
var ADMIN_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' },
];
var _tplActivePattIdx = 0;

function _selectTplPatt(dot, corner) {
    var dotEl = document.getElementById('tpl-dot');
    var corEl = document.getElementById('tpl-corner');
    if (dotEl) dotEl.value = dot || 'square';
    if (corEl) corEl.value = corner || 'square';
    _tplActivePattIdx = 0;
    ADMIN_PATTERN_OPTIONS.forEach(function (p, i) {
        if (p.dot === (dot || 'square') && p.corner === (corner || 'square')) {
            _tplActivePattIdx = i;
        }
    });
    document.querySelectorAll('.tpl-patt-card').forEach(function (c) {
        c.classList.toggle('tpl-patt-active', parseInt(c.dataset.idx, 10) === _tplActivePattIdx);
    });
}

function _buildTplPatternSection() {
    var track = document.getElementById('tpl-patt-track');
    if (!track) return;
    track.innerHTML = '';
    ADMIN_PATTERN_OPTIONS.forEach(function (patt, idx) {
        var card = document.createElement('div');
        card.className = 'tpl-patt-card' + (idx === 0 ? ' tpl-patt-active' : '');
        card.dataset.idx = idx;
        card.style.cssText = '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;';
        var ph = document.createElement('div');
        ph.style.cssText = 'width:52px;height:52px;border-radius:6px;background:#e2e8f0;display:flex;align-items:center;justify-content:center;';
        ph.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="2" y="2" width="5" height="5" fill="#94a3b8"/><rect x="9" y="2" width="5" height="5" fill="#94a3b8"/><rect x="2" y="9" width="5" height="5" fill="#94a3b8"/><rect x="9" y="9" width="2" height="2" fill="#94a3b8"/><rect x="12" y="9" width="2" height="2" fill="#94a3b8"/><rect x="9" y="12" width="2" height="2" fill="#94a3b8"/><rect x="12" y="12" width="2" height="2" fill="#94a3b8"/></svg>';
        card.appendChild(ph);
        var lbl = document.createElement('div');
        lbl.style.cssText = 'font-size:9px;font-weight:600;color:#64748b;text-align:center;white-space:nowrap;';
        lbl.textContent = patt.label;
        card.appendChild(lbl);
        /* Async load SVG thumbnail */
        (function (cardEl, phEl, p) {
            fetch('/qr-code-generator/preview', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    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) { return r.json(); }).then(function (d) {
                if (d.svg) {
                    var wrap = document.createElement('div');
                    wrap.innerHTML = d.svg;
                    wrap.style.cssText = 'width:52px;height:52px;border-radius:6px;overflow:hidden;flex-shrink:0;';
                    cardEl.replaceChild(wrap, phEl);
                }
            }).catch(function () {});
        })(card, ph, patt);
        card.addEventListener('click', function () {
            _tplActivePattIdx = parseInt(this.dataset.idx, 10);
            var p = ADMIN_PATTERN_OPTIONS[_tplActivePattIdx];
            _selectTplPatt(p.dot, p.corner);
            _scheduleTplPreview();
        });
        track.appendChild(card);
    });
}

/* ── Admin template live preview ─────────────────────────────────── */
var _tplPreviewTimer = null;
var _tplLogoB64 = '';

function _scheduleTplPreview() {
    clearTimeout(_tplPreviewTimer);
    _tplPreviewTimer = setTimeout(_runTplPreview, 350);
}

function _runTplPreview() {
    var prev = document.getElementById('tpl-qr-preview');
    if (!prev) return;
    var fg  = (document.getElementById('tpl-fg')  || {}).value || '#000000';
    var bg  = (document.getElementById('tpl-bg')  || {}).value || '#ffffff';
    var eye = (document.getElementById('tpl-eye') || {}).value || '#000000';
    var dot = (document.getElementById('tpl-dot') || {}).value || 'square';
    var cor = (document.getElementById('tpl-corner') || {}).value || 'square';
    var ec  = (document.getElementById('tpl-ec')  || {}).value || 'H';
    fetch('/qr-code-generator/preview', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            content: 'https://example.com',
            fg_color: fg, bg_color: bg, eye_color: eye,
            dot_style: dot, corner_style: cor,
            error_correction: ec, qr_size: 160,
            logo_b64: _tplLogoB64, logo_size: 22, logo_margin: 0,
            frame_style: 'none', force_watermark: false,
        })
    }).then(function (r) { return r.json(); }).then(function (d) {
        if (d.svg) { prev.innerHTML = d.svg; }
    }).catch(function () {});
}

/* Hook all template form fields */
['tpl-fg','tpl-bg','tpl-eye'].forEach(function (id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('input', _scheduleTplPreview);
});
['tpl-fg-hex','tpl-bg-hex','tpl-eye-hex'].forEach(function (id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('input', _scheduleTplPreview);
});
['tpl-dot','tpl-corner','tpl-ec'].forEach(function (id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('change', _scheduleTplPreview);
});

/* Auto EC=H when logo uploaded + read logo for preview */
var _tplLogoUpload = document.getElementById('tpl-logo-upload');
if (_tplLogoUpload) {
    _tplLogoUpload.addEventListener('change', function () {
        var ecEl = document.getElementById('tpl-ec');
        if (ecEl) ecEl.value = 'H';
        var file = this.files[0];
        if (!file) { _tplLogoB64 = ''; _scheduleTplPreview(); return; }
        var reader = new FileReader();
        reader.onload = function (e) {
            _tplLogoB64 = e.target.result;
            _scheduleTplPreview();
        };
        reader.readAsDataURL(file);
    });
}

/* Clear logo preview when remove checkbox is ticked */
var _tplLogoRemove = document.getElementById('tpl-logo-remove');
if (_tplLogoRemove) {
    _tplLogoRemove.addEventListener('change', function () {
        if (this.checked) { _tplLogoB64 = ''; _scheduleTplPreview(); }
    });
}

/* Trigger preview when editing an existing template */
var _origAdminEditTemplate = adminEditTemplate;
adminEditTemplate = function (tpl) {
    _origAdminEditTemplate(tpl);
    _tplLogoB64 = tpl.logo_b64 || '';
    _scheduleTplPreview();
};

/* Inject CSS for tpl-patt-card active state */
(function () {
    var s = document.createElement('style');
    s.textContent = [
        '.tpl-patt-card { border: 2px solid #d1d5db !important; background: #f8fafc !important; }',
        '.dark .tpl-patt-card { border-color: #374151 !important; background: #1e293b !important; }',
        '.tpl-patt-card.tpl-patt-active { border-color: var(--oc-primary,#16a34a) !important; background: color-mix(in srgb,var(--oc-primary,#16a34a) 10%,transparent) !important; }',
        '.tpl-patt-card:hover { border-color: #9ca3af !important; }',
    ].join('');
    document.head.appendChild(s);
}());

/* Build pattern selector and trigger initial preview */
_buildTplPatternSection();

/* Initial preview on page load */
_scheduleTplPreview();
</script>

<div class="mt-6 rounded-xl border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 p-4">
    <p class="text-sm font-semibold text-blue-700 dark:text-blue-400 mb-1"><i class="fa fa-info-circle mr-1"></i>{% trans %}Plan-level QR Controls{% endtrans %}</p>
    <p class="text-xs text-blue-600 dark:text-blue-500">
        {% trans %}Per-plan limits for dynamic QR codes, analytics history, watermark removal, CSV export, and API access are configured in the{% endtrans %}
        <a href="{{ full_url('/admin/plans') }}" class="font-semibold underline">{% trans %}Subscription Plans{% endtrans %}</a> {% trans %}page under the "QR Code Features" section of each plan's edit form.{% endtrans %}
    </p>
</div>
{% endblock %}