{% extends '@SonataAdmin/standard_layout.html.twig' %}

{% block title %}Gestion des Favicons - SEO{% endblock %}

{% block sonata_admin_content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fa fa-image"></i> Gestion des Favicons
                    </h3>
                </div>
                <div class="card-body">
                    {% if not gdAvailable %}
                        <div class="alert alert-danger">
                            <i class="fa fa-exclamation-triangle"></i>
                            <strong>Extension PHP GD manquante !</strong><br>
                            L'extension GD est requise pour générer les favicons.<br>
                            Installez-la avec : <code>sudo apt-get install php-gd</code>
                        </div>
                    {% endif %}

                    <div class="row">
                        <div class="col-md-6">
                            <h4><i class="fa fa-upload"></i> Uploader un nouveau favicon</h4>
                            <p class="text-muted">
                                Uploadez une image carrée d'au moins <strong>512x512 pixels</strong>.<br>
                                Formats acceptés : PNG, JPEG, GIF, WebP.<br>
                                L'image sera automatiquement redimensionnée dans toutes les tailles nécessaires.
                            </p>

                            <form action="{{ path('admin_seo_favicon_upload') }}" method="post" enctype="multipart/form-data" class="mb-4">
                                <div class="form-group">
                                    <label for="favicon" class="form-label">Image source (512x512 minimum)</label>
                                    <input type="file"
                                           class="form-control"
                                           id="favicon"
                                           name="favicon"
                                           accept="image/png,image/jpeg,image/gif,image/webp"
                                           required
                                           {% if not gdAvailable %}disabled{% endif %}>
                                    <small class="form-text text-muted">
                                        Recommandé : Image PNG avec fond transparent, 512x512 pixels.
                                    </small>
                                </div>
                                <button type="submit" class="btn btn-primary" {% if not gdAvailable %}disabled{% endif %}>
                                    <i class="fa fa-cogs"></i> Générer les favicons
                                </button>
                            </form>
                        </div>

                        <div class="col-md-6">
                            <h4><i class="fa fa-eye"></i> Favicon actuel</h4>

                            {% if currentFavicon and faviconExists %}
                                <div class="text-center mb-3">
                                    <img src="{{ currentFavicon }}"
                                         alt="Favicon actuel"
                                         style="max-width: 128px; max-height: 128px; border: 1px solid #ddd; padding: 10px; background: #f8f9fa;"
                                         loading="lazy">
                                </div>
                                <p class="text-center text-muted">
                                    <small>{{ currentFavicon }}</small>
                                </p>

                                <form action="{{ path('admin_seo_favicon_regenerate') }}" method="post" class="text-center">
                                    <button type="submit" class="btn btn-secondary" {% if not gdAvailable %}disabled{% endif %}>
                                        <i class="fa fa-refresh"></i> Régénérer les favicons
                                    </button>
                                </form>
                            {% else %}
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i>
                                    Aucun favicon configuré. Uploadez une image pour commencer.
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <hr>

                    <h4><i class="fa fa-list"></i> Tailles générées</h4>
                    <p class="text-muted">
                        Lorsque vous uploadez une image, les tailles suivantes seront automatiquement générées :
                    </p>

                    <div class="row">
                        <div class="col-md-3">
                            <h5>Standard</h5>
                            <ul class="list-unstyled small">
                                <li>16x16, 32x32, 48x48</li>
                                <li>64x64, 96x96, 128x128</li>
                                <li>192x192, 256x256</li>
                                <li>384x384, 512x512</li>
                                <li>favicon.ico (multi-résolution)</li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h5>Apple Touch</h5>
                            <ul class="list-unstyled small">
                                <li>57x57, 60x60, 72x72</li>
                                <li>76x76, 114x114, 120x120</li>
                                <li>144x144, 152x152, 180x180</li>
                                <li>apple-touch-icon.png</li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h5>Android</h5>
                            <ul class="list-unstyled small">
                                <li>36x36, 48x48, 72x72</li>
                                <li>96x96, 144x144</li>
                                <li>192x192, 512x512</li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <h5>Microsoft</h5>
                            <ul class="list-unstyled small">
                                <li>70x70, 144x144</li>
                                <li>150x150, 310x310</li>
                            </ul>
                        </div>
                    </div>

                    <div class="alert alert-info mt-3">
                        <i class="fa fa-lightbulb-o"></i>
                        <strong>Astuce :</strong> Le fichier <code>manifest.json</code> sera automatiquement mis à jour
                        avec les nouvelles icônes pour une compatibilité PWA optimale.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}