{% extends "base.html" %}
{% block page_title %}My QR Codes{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
<div class="premium-dashboard">
    <div class="dashboard-hero">
        <div class="qrmagic-shell">
            <div class="hero-glass">
                <div class="hero-text">
                    <h1>My QR Library</h1>
                    <p>Manage and track all your dynamic QR codes in one place.</p>
                </div>
                <div class="hero-actions">
                    <button id="start-scan-btn" class="blocks-button blocks-button-secondary">
                        <i class="fas fa-camera"></i> Scan &amp; Save
                    </button>
                    <a href="/plugins/qrmagic/qr_new" class="blocks-button blocks-button-primary">
                        <i class="fas fa-plus"></i> Create New QR
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="qrmagic-shell dashboard-main">
        {% if qrs %}
        <!-- Scanner Modal -->
        <div id="scanner-modal" class="modal-overlay" hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="qr-scanner-title">
            <div class="modal-content scanner-modal-content">
                <div class="modal-header">
                    <h3 id="qr-scanner-title">Scan QR Code</h3>
                    <button class="blocks-icon-button close-btn" onclick="closeScanner()">×</button>
                </div>
                <div class="modal-body">
                    <div id="reader"></div>
                    <p class="text-muted text-center mt-2">Point your camera at a QR code</p>
                </div>
            </div>
        </div>

        <!-- Mobile specific UI elements -->
        <div class="mobile-ui">
            <div class="mobile-top-actions">
                <button onclick="toggleMobileMenu()" class="blocks-icon-button mobile-menu-trigger" aria-label="Open menu">⋮</button>
                <div id="mobile-menu-dropdown" class="mobile-menu-dropdown hidden">
                    <a href="/plugins/qrmagic/qr_new" class="mobile-menu-item">➕ Create New</a>
                    <button onclick="document.getElementById('start-scan-btn').click(); toggleMobileMenu()" class="mobile-menu-item">📷 Scan &amp; Save</button>
                </div>
            </div>

            <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
            <div class="qr-sidebar" id="qrSidebar" role="navigation" aria-label="QR codes">
                <div class="sidebar-header">
                    <span>Select QR Code</span>
                    <button onclick="toggleSidebar()" aria-label="Close QR list">✕</button>
                </div>
                <div class="sidebar-content">
                    {% if sidebar_qrs %}
                    {% set sorted_sidebar = sidebar_qrs | sort(attribute="qr_type") %}
                    {% set grouped_qrs = sorted_sidebar | group_by(attribute="qr_type") %}
                    {% for type_name, group in grouped_qrs %}
                    <div class="sidebar-type-heading">{{ type_name | upper }}</div>
                    {% for qr in group %}
                    <a href="/plugins/qrmagic/qr_view?id={{ qr.id }}" class="sidebar-item" onclick="handleSidebarClick(event, {{ qr.id }})">
                        <span class="sidebar-icon">
                            {% set t = qr.qr_type | lower %}
                            {% if t == "url" %}🔗
                            {% elif t == "wifi" %}📶
                            {% elif t == "email" %}📧
                            {% elif t == "phone" %}📞
                            {% elif t == "sms" %}💬
                            {% elif t == "whatsapp" %}💬
                            {% elif t == "text" %}📝
                            {% elif t == "vcard" %}👤
                            {% elif t == "calendar" %}📅
                            {% elif t == "upi" %}💰
                            {% elif t == "location" %}📍
                            {% else %}📱{% endif %}
                        </span>
                        <span class="sidebar-text">{{ qr.name }}</span>
                    </a>
                    {% endfor %}
                    {% endfor %}
                    {% endif %}
                </div>
            </div>

            <button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Open QR list">☰</button>
        </div>

        <div class="qr-grid" id="qrContainer">
            {% for qr in qrs %}
            <div class="feature-glass-card qr-display-card qr-card" id="qr-card-{{ qr.id }}">
                <div class="qr-card-type">
                    {% if qr.qr_type == 'url' %}<i class="fas fa-link"></i>
                    {% elif qr.qr_type == 'wifi' %}<i class="fas fa-wifi"></i>
                    {% elif qr.qr_type == 'email' %}<i class="fas fa-envelope"></i>
                    {% elif qr.qr_type == 'phone' %}<i class="fas fa-phone"></i>
                    {% elif qr.qr_type == 'vcard' %}<i class="fas fa-address-card"></i>
                    {% else %}<i class="fas fa-qrcode"></i>{% endif %}
                    <span class="qr-type-label">{{ qr.qr_type | upper }}</span>
                </div>

                <div class="qr-preview-small"
                     data-qr-type="{{ qr.qr_type }}"
                     data-qr-content="{{ qr.content | json_encode | escape }}"
                     data-qr-customization="{{ qr.customization | json_encode | escape }}"
                     {% if qr.tracking_url %}data-qr-tracking-url="{{ qr.tracking_url | escape }}"{% endif %}>
                    <div class="qr-placeholder text-muted">Loading...</div>
                </div>


                <div class="qr-info">
                    <h3>{{ qr.name }}</h3>
                    <div class="qr-meta">
                        <span><i class="far fa-calendar"></i> {{ qr.created_at | date_in_tz(timezone=settings.timezone, format="%Y-%m-%d") | default(value="--") }}</span>
                        {% if qr.is_dynamic %}<span class="badge badge-success">Dynamic</span>{% endif %}
                    </div>
                </div>

                <div class="qr-card-footer">
                    <a href="/plugins/qrmagic/qr_view?id={{ qr.id }}" class="btn-manage" aria-label="Manage {{ qr.name }}">Manage <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            {% endfor %}
        </div>
        <div id="sentinel">
            <div class="text-center text-muted" hidden id="loader">Loading more...</div>
        </div>
        {% else %}
        <div class="feature-glass-card empty-dashboard empty-state">
            <div class="feature-icon-wrapper">🪄</div>
            <h2>Start your magic</h2>
            <p>You haven't created any QR codes yet. Let's create your first one!</p>
            <a href="/plugins/qrmagic/qr_new" class="blocks-button blocks-button-primary">Create First QR Code</a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script src="/static/js/qrcode.min.js"></script>
<script src="/plugins/qrmagic/assets/js/qrmagic-core.js"></script>
<script src="/plugins/qrmagic/assets/js/qr_list.js"></script>
{% endblock %}