{% extends 'admin/base.html' %}
{% block title %}{{ t('media.favicon_title') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>🎯 {{ t('media.favicon_title') }}</h2>
    <p>{{ t('media.favicon_subtitle') }}</p>
</div>


    
    <!-- Upload Section -->
    <div class="settings-section">
        <h3>📤 {{ t('media.favicon_upload_section') }}</h3>
        
        <div class="alert alert-info mb-4">
            💡 {{ t('media.favicon_tip_text') }}
        </div>
        
        <form method="POST" enctype="multipart/form-data" id="faviconForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="upload-zone" id="dropZone" onclick="document.getElementById('favicon_source').click()">
                <input type="file" id="favicon_source" name="favicon_source" accept="image/png,image/jpeg,image/svg+xml,image/webp">
                <div class="upload-zone-icon">🖼️</div>
                <div class="upload-zone-label">{{ t('media.favicon_drop_label') }}</div>
                <div class="upload-zone-hint">{{ t('media.favicon_drop_hint') }}</div>
            </div>
            
            <div class="upload-preview" id="uploadPreview">
                <img id="previewImg" src="" alt="{{ t('common.preview') }}">
                <div>
                    <div class="upload-preview-name" id="previewName"></div>
                    <div class="upload-preview-meta" id="previewMeta"></div>
                </div>
            </div>
            
            <div class="form-footer">
                <button type="submit" class="btn btn-primary" id="generateBtn" disabled>
                    ⚡ {{ t('media.favicon_generate_btn') }}
                </button>
            </div>
        </form>
    </div>
    
    
    <!-- Current Favicons -->
    <div class="settings-section">
        <h3>📋 {{ t('media.favicon_current_section') }}</h3>
        
        {% set has_any = favicons.favicon_ico or favicons.favicon_96 or favicons.favicon_svg or favicons.apple_touch_icon %}
        
        {% if has_any %}
        <div class="favicon-grid">
            
            {% set items = [
                ('favicon_ico', t('media.fav_label_ico'), t('media.fav_desc_ico'), favicons.favicon_ico),
                ('favicon_96', t('media.fav_label_png96'), t('media.fav_desc_96'), favicons.favicon_96),
                ('favicon_192', t('media.fav_label_png192'), t('media.fav_desc_192'), favicons.favicon_192),
                ('favicon_512', t('media.fav_label_png512'), t('media.fav_desc_512'), favicons.favicon_512),
                ('apple_touch_icon', t('media.fav_label_apple'), t('media.fav_desc_apple'), favicons.apple_touch_icon),
                ('favicon_svg', t('media.fav_label_svg'), t('media.fav_desc_svg'), favicons.favicon_svg),
                ('site_webmanifest', t('media.fav_label_manifest'), t('media.fav_desc_manifest'), favicons.site_webmanifest),
            ] %}
            
            {% for key, label, size_label, url in items %}
            <div class="favicon-item {% if url %}active{% else %}empty{% endif %}">
                <div class="favicon-preview-box">
                    {% if url and key != 'site_webmanifest' %}
                    <img src="{{ url }}" alt="{{ label }}">
                    {% elif url and key == 'site_webmanifest' %}
                    <span class="favicon-icon">📄</span>
                    {% else %}
                    <span class="favicon-dash">—</span>
                    {% endif %}
                </div>
                <div class="favicon-label">{{ label }}</div>
                <div class="favicon-size">{{ size_label }}</div>
            </div>
            {% endfor %}
        </div>
        
        <div class="form-footer">
            <form method="POST" action="{{ url_for('admin_favicon_delete') }}" 
                  onsubmit="return confirm('{{ t('media.favicon_delete_confirm') }}');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-danger btn-sm">🗑️ {{ t('media.favicon_delete_btn') }}</button>
            </form>
        </div>
        
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">🎯</div>
            <p>{{ t('media.favicon_empty') }}</p>
        </div>
        {% endif %}
    </div>

<script>
(function() {
    var dropZone = document.getElementById('dropZone');
    var fileInput = document.getElementById('favicon_source');
    var preview = document.getElementById('uploadPreview');
    var previewImg = document.getElementById('previewImg');
    var previewName = document.getElementById('previewName');
    var previewMeta = document.getElementById('previewMeta');
    var generateBtn = document.getElementById('generateBtn');
    
    ['dragenter', 'dragover'].forEach(function(evt) {
        dropZone.addEventListener(evt, function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
    });
    ['dragleave', 'drop'].forEach(function(evt) {
        dropZone.addEventListener(evt, function(e) { e.preventDefault(); dropZone.classList.remove('dragover'); });
    });
    dropZone.addEventListener('drop', function(e) {
        if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; showPreview(e.dataTransfer.files[0]); }
    });
    fileInput.addEventListener('change', function() {
        if (fileInput.files.length) showPreview(fileInput.files[0]);
    });
    
    function showPreview(file) {
        var url = URL.createObjectURL(file);
        previewImg.src = url;
        previewName.textContent = file.name;
        var sizeKB = (file.size / 1024).toFixed(1);
        var img = new Image();
        img.onload = function() { previewMeta.textContent = img.width + ' × ' + img.height + ' px · ' + sizeKB + ' {{ t("common.unit_kb") }}'; };
        img.src = url;
        previewMeta.textContent = sizeKB + ' {{ t("common.unit_kb") }}';
        preview.classList.add('visible');
        generateBtn.disabled = false;
    }

    document.getElementById('faviconForm').addEventListener('submit', function() {
        generateBtn.disabled = true;
        generateBtn.innerHTML = '⏳ {{ t("media.generating_favicons") }}';
        generateBtn.style.opacity = '0.7';
    });
})();
</script>
{% endblock %}