{% extends "base.html" %}

{% block content %}
<div class="qr-owner-container">
    <div class="flex flex-col gap-3">
        <a href="/plugins/qr-connect/dashboard" class="back-link"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
        <h1 class="m-0 text-2xl font-bold tracking-tight text-foreground">Sticker Settings</h1>
        <p class="text-muted">Editing: {{ sticker.label }}</p>
    </div>

    <div class="settings-grid-layout">
        <div class="settings-main-column">
            <div class="qrc-card">
                <form action="/plugins/qr-connect/sticker_update" method="POST" id="update-form">
                    <input type="hidden" name="id" value="{{ sticker.id }}">
                    
                    <div class="form-group mb-3">
                        <label>Label</label>
                        <input type="text" name="label" value="{{ sticker.label }}" required class="blocks-input">
                    </div>

                    <div class="form-group mb-3">
                        <label>Public Status State</label>
                        <select name="status_state" class="blocks-input">
                            <option value="available" {% if sticker.status_state == 'available' %}selected{% endif %}>Available</option>
                            <option value="busy" {% if sticker.status_state == 'busy' %}selected{% endif %}>Busy</option>
                            <option value="away" {% if sticker.status_state == 'away' %}selected{% endif %}>Away</option>
                            <option value="emergency" {% if sticker.status_state == 'emergency' %}selected{% endif %}>Emergency</option>
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label>Public Status Message</label>
                        <input type="text" name="status_message" value="{{ sticker.status_message }}" required class="blocks-input">
                        <small class="text-muted">This is what scanners will see immediately.</small>
                    </div>

                    <div class="form-group mb-3 flex-row items-center gap-3">
                        <input type="checkbox" id="messaging_enabled" name="messaging_enabled" value="true" {% if sticker.messaging_enabled %}checked{% endif %} class="size-4 accent-brand">
                        <label for="messaging_enabled" class="cursor-pointer">Enable Anonymous Messaging</label>
                    </div>

                    <div class="form-group mb-4">
                        <label>Auto-Reply Text</label>
                        <input type="text" name="auto_reply_text" value="{{ sticker.auto_reply_text }}" class="blocks-input">
                        <small class="text-muted">Sent automatically when a scanner starts a new chat.</small>
                    </div>

                    <button type="submit" class="blocks-button blocks-button-primary">Save Changes</button>
                </form>
            </div>

            <div class="qrc-card qrc-card-danger">
                <h5>Danger Zone</h5>
                <p class="text-sm text-muted">Deleting a sticker will remove it permanently, including all conversations.</p>
                <form action="/plugins/qr-connect/sticker_delete" method="POST">
                    <input type="hidden" name="id" value="{{ sticker.id }}">
                    <button type="submit" class="blocks-button blocks-button-danger">Delete Sticker</button>
                </form>
            </div>
        </div>

        <div class="settings-side-column">
            <div class="qrc-card text-center items-center">
                <h5 class="m-0 text-base font-semibold text-foreground">Your QR Code</h5>
                <div class="qr-preview-container" data-shortcode="{{ sticker.short_code }}">
                    <div class="qr-placeholder spinner">
                        <i class="fas fa-spinner fa-spin text-muted"></i>
                    </div>
                </div>
                <p class="text-xs text-muted">Short code: <code>{{ sticker.short_code }}</code></p>
                <p class="text-xs text-muted"><i class="fas fa-bullhorn"></i> {{ sticker.status_message }}</p>
                <button class="blocks-button blocks-button-secondary w-full download-qr-btn" data-shortcode="{{ sticker.short_code }}" data-status-message="{{ sticker.status_message }}">
                    <i class="fas fa-download"></i> Download QR
                </button>
                <small class="text-muted mt-2 d-block">Download includes your public status message printed below the QR.</small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    window.BASE_URL = "{{ base_url | safe }}";
</script>
<script src="/plugins/qr-connect/assets/js/qr_connect_settings.js?v={{ now_ts }}"></script>
{% endblock %}