{% extends "base.html" %}
{% block page_title %}Edit QR Code{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
{% if qr %}
<div class="qrmagic-shell">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <h1>Edit QR Code: {{ qr.name }}</h1>
        <a href="/plugins/qrmagic/qr_view?id={{ qr.id }}" class="blocks-button blocks-button-secondary">
            ← Back to View
        </a>
    </div>

    <form id="qr-form" class="qr-form" action="/plugins/qrmagic/qr_edit" method="POST"
          data-qr-config="{{ qr | json_encode }}">
        <input type="hidden" name="id" value="{{ qr.id }}">
        
        <div class="qr-layout-grid">
            <!-- Left Column: Inputs -->
            <div class="scrollable-column">
                {% include "qrmagic/qr_fields.html" %}
            </div>

            <!-- Right Column: Preview -->
            <div class="sticky-column">
                <div class="qrmagic-preview-panel">
                    <h5 class="mb-3">Live Preview</h5>
                    <div id="qr-preview-container" class="flex items-center justify-center mb-3 mx-auto">
                       <div id="qr-preview">
                           <div class="text-muted small">Preview will appear here</div>
                       </div>
                    </div>
                    
                    <div class="grid gap-2">
                        <button type="submit" class="blocks-button blocks-button-primary w-100 btn-large">
                            💾 Update QR Code
                        </button>
                        <button type="button" id="qr-random-style" class="blocks-button blocks-button-secondary w-100">
                            🎲 Random Style
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{% else %}
<div class="qrmagic-shell text-center p-5">
    <div class="alert alert-danger">
        <h3>Edit Failed</h3>
        <p>{{ error | default(value="The requested QR code could not be loaded for editing.") }}</p>
        <a href="/plugins/qrmagic/home" class="blocks-button blocks-button-primary mt-3">Back to My QR Codes</a>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script src="/plugins/qrmagic/assets/js/qrmagic-core.js"></script>
<script src="/plugins/qrmagic/assets/js/qr_edit_init.js"></script>
<script src="/plugins/qrmagic/assets/js/qr-generator.js"></script>
{% endblock %}