{% set icons_base = "/icons" %}
{% if icons_base_url is defined %}
  {% set icons_base = icons_base_url %}
{% endif %}
{% set panel_update = "/plugins/favicon/update" %}
{% if god_panel_update_url is defined %}
  {% set panel_update = god_panel_update_url %}
{% elif favicon_update_url is defined %}
  {% set panel_update = favicon_update_url %}
{% endif %}
<div class="blocks-workspace favicon-admin-container{% if settings_embedded | default(value=false) %} settings-host-anchor scroll-mt-[5.5rem] max-w-none m-0{% endif %}" id="favicon-admin-page"
    data-update-url="{{ panel_update }}"
    data-settings-embedded="{% if settings_embedded | default(value=false) %}true{% else %}false{% endif %}">
    {% if settings_embedded | default(value=false) %}<h2>Favicon &amp; logo</h2>{% else %}<h1>Favicon &amp; logo</h1>{% endif %}
    <p class="blocks-workspace-help">Choose an image, review the previews, then save your site branding.</p>
    <div data-workspace-notice class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>
    <div class="blocks-workspace-panel">
        <div class="card-body">
            <div class="upload-section">
                <div class="drop-zone" id="drop-zone">
                    <label for="image-input">Drop an image here or choose a file</label>
                    <input type="file" name="myFile" class="blocks-file-input max-w-xl" aria-describedby="favicon-upload-help" id="image-input" accept="image/*">
                </div>
                <p id="favicon-upload-help" class="blocks-workspace-help">Use a high-resolution square PNG, JPEG or SVG. Existing icons remain until you save.</p>
            </div>

            <section class="preview-section" id="preview-section" hidden aria-label="Branding preview">
                <h2>Preview &amp; confirm</h2>
                <div class="preview-grid">
                    <div class="preview-item">
                        <span>Logo (60px high)</span>
                        <div class="logo-preview-box">
                            <img id="logo-preview"  alt="Logo Preview">
                        </div>
                    </div>
                    <div class="preview-item">
                        <span>Favicon (32x32)</span>
                        <div class="favicon-preview-box">
                            <img id="favicon-preview"  alt="Favicon Preview">
                        </div>
                    </div>
                </div>
                <div class="blocks-workspace-actions">
                    <button type="button" class="blocks-button blocks-button-primary" id="save-btn">
                        Save changes
                    </button>
                    <button type="button" class="blocks-button blocks-button-secondary" id="cancel-upload-btn">Cancel</button>
                </div>

            </section>
            <div class="current-assets">
                <h2>Current assets</h2>
                <div class="assets-grid god-favicon-assets-grid">
                    <div class="asset-item">
                        <span>Site Logo (SVG)</span>
                        <img class="god-favicon-asset" data-icon-file="logo.svg" src="{{ icons_base }}/logo.svg?v={{ now_ts }}" alt="Current SVG Logo">
                    </div>
                    <div class="asset-item">
                        <span>Site Logo (PNG)</span>
                        <img class="god-favicon-asset" data-icon-file="logo.png" src="{{ icons_base }}/logo.png?v={{ now_ts }}" alt="Current Logo">
                    </div>
                    <div class="asset-item">
                        <span>PWA (192x192)</span>
                        <img class="god-favicon-asset" data-icon-file="icon-192.png" src="{{ icons_base }}/icon-192.png?v={{ now_ts }}" alt="192 Icon">
                    </div>
                    <div class="asset-item">
                        <span>PWA (512x512)</span>
                        <img class="god-favicon-asset" data-icon-file="icon-512.png" src="{{ icons_base }}/icon-512.png?v={{ now_ts }}" alt="512 Icon">
                    </div>
                    <div class="asset-item">
                        <span>Apple (180x180)</span>
                        <img class="god-favicon-asset" data-icon-file="apple-touch-icon.png" src="{{ icons_base }}/apple-touch-icon.png?v={{ now_ts }}" alt="Apple Icon">
                    </div>
                    <div class="asset-item">
                        <span>Favicon (32x32)</span>
                        <img class="god-favicon-asset" data-icon-file="favicon.ico" src="{{ icons_base }}/favicon.ico?v={{ now_ts }}" alt="Current Favicon">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>