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

{% block head %}
{% endblock %}

{% block content %}
{% if qr %}
<div class="qrmagic-shell" id="qr-view-container"
     data-qr-id="{{ qr.id | default(value=0) }}"
     data-qr-name="{{ qr.name }}"
     data-qr-content="{{ content | json_encode }}"
     data-qr-type="{{ qr.qr_type }}"
     data-qr-customization="{{ customization | json_encode }}"
     {% if qr.tracking_url %}data-qr-tracking-url="{{ qr.tracking_url }}"{% endif %}>
    <div class="page-header d-flex justify-content-between align-items-center">
        <h1>{{ qr.name }}</h1>
        <a href="/plugins/qrmagic/home" class="blocks-button blocks-button-secondary">← Back to List</a>
    </div>

    <div class="view-qr-container">
        <div class="qr-preview-column">
            <div class="qr-preview-card">
                <div class="qr-svg-wrapper">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>
                
                <div class="qr-details mt-4 text-start">
                    <div class="detail-item mb-2">
                        <strong>Type:</strong> 
                        <span class="badge badge-primary">{{ qr.qr_type | upper }}</span>
                    </div>
                    <div class="detail-item mb-2">
                        <strong>Created:</strong> 
                        <span class="text-muted">{{ qr.created_at | date_in_tz(timezone=settings.timezone) }}</span>
                    </div>
                    {% if qr.is_dynamic %}
                    <div class="detail-item mb-2">
                        <strong>Status:</strong> 
                        <span class="badge badge-success">Dynamic Tracking Active</span>
                    </div>
                    {% endif %}
                    {% if qr.tracking_url %}
                    <div class="detail-item mb-2">
                        <strong>Tracking URL:</strong>
                        <a href="{{ qr.tracking_url }}" class="text-break" target="_blank" rel="noopener">{{ qr.tracking_url }}</a>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            {% if qr.is_dynamic %}
            <div class="card mt-4 p-4 border">
                <h3>Analytics Overview</h3>
                <p class="text-muted">Tracking stats will appear here as people scan your QR code.</p>
                <div class="activity-item text-muted">
                    <span>Scan Data Loading...</span>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="qr-actions-column">
            <div class="qr-actions-card">
                <h3 class="mb-4">Actions</h3>
                <div class="btn-group-vertical">
                    <button id="copy-btn" class="blocks-button blocks-button-secondary btn-large">
                        <i class="fas fa-copy"></i> Copy Content
                    </button>
                    <button id="share-btn" class="blocks-button blocks-button-secondary btn-large">
                        <i class="fas fa-share-alt"></i> Share
                    </button>
                    <a href="/plugins/qrmagic/qr_edit?id={{ qr.id }}" class="blocks-button blocks-button-secondary btn-large">
                        <i class="fas fa-edit"></i> Edit Design
                    </a>
                    <hr>
                    <button id="download-png" class="blocks-button blocks-button-primary btn-large">
                        <i class="fas fa-download"></i> Download PNG
                    </button>
                    <button id="download-svg" class="blocks-button blocks-button-secondary btn-large">
                        <i class="fas fa-file-code"></i> Download SVG
                    </button>
                    <hr>
                    <button id="delete-qr-btn" class="blocks-button blocks-button-danger btn-large">
                        <i class="fas fa-trash-alt"></i> Delete QR Code
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="qrmagic-shell text-center p-5">
    <div class="alert alert-danger">
        <h3>QR Code Not Found</h3>
        <p>{{ error | default(value="The requested QR code could not be found or the ID is invalid.") }}</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="/static/js/qrcode.min.js"></script>
<script src="/plugins/qrmagic/assets/js/qrmagic-core.js"></script>
<script src="/plugins/qrmagic/assets/js/qr_view.js"></script>
{% endblock %}