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

{% block head %}
{% endblock %}

{% block content %}
<div class="qrmagic-shell">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <h1>Create New QR Code</h1>
        <a href="/plugins/qrmagic/home" class="blocks-button blocks-button-secondary">
            ← Back to My QR Codes
        </a>
    </div>

    <form id="qr-form" class="qr-form" action="/plugins/qrmagic/qr_new" method="POST">
        <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">
                            💾 Save 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>
{% endblock %}

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