{% extends 'admin/_layout.html.twig' %}

{% block title %}{{ seo.pageLabel }} — SEO — Admin{% endblock %}
{% block page_title %}SEO : {{ seo.pageLabel }}{% endblock %}
{% block page_subtitle %}{{ seo.routeName }} ({{ seo.pageCategory }}){% endblock %}

{% block admin_body %}
<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <a href="{{ path('app_admin_seo_index') }}">SEO</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ seo.pageLabel }}</span>
</nav>

<form id="seo-form" novalidate data-submit-url="{{ path('app_admin_seo_edit', {uuid: seo.uuid}) }}" data-page-category="{{ seo.pageCategory }}">
<div class="adm-param-grid">

    {# ── Base ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Balises de base</h3>
            <div class="adm-field">
                <label>Title</label>
                <textarea name="title" rows="2" placeholder="Titre de la page" data-counter="50,60">{{ seo.title }}</textarea>
                <span class="seo-counter" data-for="title"></span>
            </div>
            {% if seo.pageCategory != 'auth' %}
            <div class="adm-field">
                <label>Meta description</label>
                <textarea name="metaDescription" rows="8" placeholder="Description pour les moteurs de recherche" data-counter="120,160">{{ seo.metaDescription }}</textarea>
                <span class="seo-counter" data-for="metaDescription"></span>
            </div>
            <div class="adm-field">
                <label>URL canonique</label>
                <input type="text" name="canonicalUrl" value="{{ seo.canonicalUrl }}" placeholder="Auto si vide">
            </div>
            <div class="adm-field">
                <label>Robots</label>
                <input type="text" name="robots" value="{{ seo.robots }}" placeholder="index, follow">
            </div>
            {% endif %}
        </div>
    </div>

    {% if seo.pageCategory == 'public' %}
    {# ── Open Graph ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Open Graph</h3>
            <div class="adm-field">
                <label>OG Title</label>
                <textarea name="ogTitle" rows="2" placeholder="Fallback sur title" data-counter="40,60">{{ seo.ogTitle }}</textarea>
                <span class="seo-counter" data-for="ogTitle"></span>
            </div>
            <div class="adm-field">
                <label>OG Description</label>
                <textarea name="ogDescription" rows="8" placeholder="Fallback sur meta description" data-counter="80,200">{{ seo.ogDescription }}</textarea>
                <span class="seo-counter" data-for="ogDescription"></span>
            </div>
            <div class="adm-field">
                <label>OG Image <span style="font-size:.7rem;color:var(--muted);font-weight:300">(1200×630 recommandé)</span></label>
                <input type="hidden" name="ogImageCropped" id="og-img-cropped">
                <div class="adm-upload-zone" id="og-img-zone" data-crop="og-img" data-ratio="1.91">
                    <img class="adm-upload-preview{% if not seo.ogImageUrl %} hidden{% endif %}" id="og-img-preview"
                         src="{{ seo.ogImageUrl ? (seo.ogImageUrl starts with 'http' ? seo.ogImageUrl : asset(seo.ogImageUrl)) : '' }}" alt="OG Image">
                    <div class="adm-upload-placeholder{% if seo.ogImageUrl %} hidden{% endif %}" id="og-img-placeholder">
                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        <span>Glissez ou cliquez pour charger</span>
                    </div>
                    <input type="file" class="adm-upload-input" accept="image/*">
                </div>
                <div class="adm-upload-actions{% if not seo.ogImageUrl %} hidden{% endif %}" id="og-img-actions">
                    <button type="button" class="adm-crop-btn" data-recrop="og-img" title="Recadrer">
                        <svg viewBox="0 0 24 24"><path d="M6 2v4H2"/><path d="M18 22v-4h4"/><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
                        Recadrer
                    </button>
                    <button type="button" class="adm-crop-btn" data-view="og-img" title="Agrandir">
                        <svg viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
                        Agrandir
                    </button>
                    <button type="button" class="adm-crop-btn" data-change="og-img" title="Changer">
                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        Changer
                    </button>
                    <button type="button" class="adm-crop-btn del" data-remove="og-img" title="Supprimer">
                        <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                        Supprimer
                    </button>
                </div>
                <input type="text" name="ogImageUrl" value="{{ seo.ogImageUrl }}" placeholder="Ou saisir une URL externe" style="margin-top:8px">
            </div>
            <div class="adm-field">
                <label>OG Image Alt</label>
                <input type="text" name="ogImageAlt" value="{{ seo.ogImageAlt }}" placeholder="Description de l'image">
            </div>
            <div class="adm-field">
                <label>OG Type</label>
                <input type="text" name="ogType" value="{{ seo.ogType }}" placeholder="website">
            </div>
        </div>
    </div>

    {# ── Twitter Card ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Twitter Card</h3>
            <div class="adm-field">
                <label>Card type</label>
                <select name="twCard">
                    <option value="summary_large_image" {{ seo.twCard == 'summary_large_image' ? 'selected' : '' }}>Summary Large Image</option>
                    <option value="summary" {{ seo.twCard == 'summary' ? 'selected' : '' }}>Summary</option>
                </select>
            </div>
            <div class="adm-field">
                <label>Twitter Title</label>
                <textarea name="twTitle" rows="2" placeholder="Fallback sur OG title" data-counter="40,70">{{ seo.twTitle }}</textarea>
                <span class="seo-counter" data-for="twTitle"></span>
            </div>
            <div class="adm-field">
                <label>Twitter Description</label>
                <textarea name="twDescription" rows="8" placeholder="Fallback sur OG description" data-counter="80,200">{{ seo.twDescription }}</textarea>
                <span class="seo-counter" data-for="twDescription"></span>
            </div>
            <div class="adm-field">
                <label>Twitter Image <span style="font-size:.7rem;color:var(--muted);font-weight:300">(fallback sur OG si vide)</span></label>
                <input type="hidden" name="twImageCropped" id="tw-img-cropped">
                <div class="adm-upload-zone" id="tw-img-zone" data-crop="tw-img" data-ratio="2">
                    <img class="adm-upload-preview{% if not seo.twImageUrl %} hidden{% endif %}" id="tw-img-preview"
                         src="{{ seo.twImageUrl ? (seo.twImageUrl starts with 'http' ? seo.twImageUrl : asset(seo.twImageUrl)) : '' }}" alt="Twitter Image">
                    <div class="adm-upload-placeholder{% if seo.twImageUrl %} hidden{% endif %}" id="tw-img-placeholder">
                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        <span>Glissez ou cliquez pour charger</span>
                    </div>
                    <input type="file" class="adm-upload-input" accept="image/*">
                </div>
                <div class="adm-upload-actions{% if not seo.twImageUrl %} hidden{% endif %}" id="tw-img-actions">
                    <button type="button" class="adm-crop-btn" data-recrop="tw-img" title="Recadrer">
                        <svg viewBox="0 0 24 24"><path d="M6 2v4H2"/><path d="M18 22v-4h4"/><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
                        Recadrer
                    </button>
                    <button type="button" class="adm-crop-btn" data-view="tw-img" title="Agrandir">
                        <svg viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
                        Agrandir
                    </button>
                    <button type="button" class="adm-crop-btn" data-change="tw-img" title="Changer">
                        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        Changer
                    </button>
                    <button type="button" class="adm-crop-btn del" data-remove="tw-img" title="Supprimer">
                        <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                        Supprimer
                    </button>
                </div>
                <input type="text" name="twImageUrl" value="{{ seo.twImageUrl }}" placeholder="Ou saisir une URL externe" style="margin-top:8px">
            </div>
            <div class="adm-field">
                <label>@site</label>
                <input type="text" name="twSite" value="{{ seo.twSite ?: siteParams.twitterHandle }}" placeholder="@monsite">
            </div>
        </div>
    </div>
    {% endif %}

    {% if seo.pageCategory in ['public', 'legal'] %}
    {# ── Sitemap ── #}
    <div class="adm-card adm-param-card">
        <div class="adm-form-fields">
            <h3 class="adm-param-title">Sitemap</h3>
            <div style="display:flex;flex-direction:column;gap:14px">
                <label class="adm-toggle-row">
                    <span class="adm-toggle-info">
                        <span class="adm-toggle-label">Inclure dans le sitemap</span>
                    </span>
                    <span class="adm-toggle-wrap">
                        <input type="checkbox" class="adm-toggle-input" name="sitemapInclude" value="1" {{ seo.sitemapInclude ? 'checked' : '' }}>
                        <span class="adm-toggle-slider"></span>
                    </span>
                </label>
            </div>
            <div class="adm-field" style="margin-top:12px">
                <label>Priorité</label>
                <select name="sitemapPriority">
                    {% for v in ['0.1','0.2','0.3','0.4','0.5','0.6','0.7','0.8','0.9','1.0'] %}
                        <option value="{{ v }}" {{ seo.sitemapPriority == v ? 'selected' : '' }}>{{ v }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="adm-field">
                <label>Fréquence de mise à jour</label>
                <select name="sitemapChangefreq">
                    {% for v in ['always','hourly','daily','weekly','monthly','yearly','never'] %}
                        <option value="{{ v }}" {{ seo.sitemapChangefreq == v ? 'selected' : '' }}>{{ v }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
    {% endif %}

</div>

<div style="margin-top:12px">
    <button type="submit" class="adm-btn adm-btn-p" id="seo-submit">
        <svg class="btn-icon-save" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
        <svg class="btn-icon-spin" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px;display:none"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="31.4 31.4" stroke-linecap="round"/></svg>
        Enregistrer
    </button>
</div>
</form>

{% if seo.pageCategory == 'public' %}
{# ── Crop modal ── #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<div class="adm-modal-overlay" id="crop-overlay">
    <div class="adm-crop-panel" onclick="event.stopPropagation()">
        <div class="adm-crop-header">
            <h3>Recadrer l'image OG</h3>
            <span class="adm-crop-dims" id="crop-dims"></span>
            <button type="button" class="form-close" id="crop-cancel"><svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <div class="adm-crop-canvas">
            <img id="crop-image" style="display:block;max-width:100%">
        </div>
        <div class="adm-crop-toolbar">
            <div class="adm-crop-tools">
                <button type="button" class="adm-crop-btn" id="crop-rot-left" title="Pivoter gauche"><svg viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
                <button type="button" class="adm-crop-btn" id="crop-rot-right" title="Pivoter droite"><svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/></svg></button>
                <span class="adm-crop-sep"></span>
                <button type="button" class="adm-crop-btn adm-crop-ratio active" data-ratio="1.91" title="1.91:1 (OG)">OG</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="2" title="2:1 (Twitter)">Twitter</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="1" title="1:1 (Carré)">1:1</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="0" title="Libre">Libre</button>
            </div>
            <div class="adm-crop-actions">
                <button type="button" class="adm-btn adm-btn-g" id="crop-cancel-btn">Annuler</button>
                <button type="button" class="adm-btn adm-btn-p" id="crop-confirm">Valider</button>
            </div>
        </div>
    </div>
</div>
<div class="adm-lightbox" id="lightbox">
    <button type="button" class="adm-lightbox-close" id="lightbox-close"><svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    <img id="lightbox-img" src="" alt="">
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
{{ parent() }}
{% if seo.pageCategory == 'public' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
{% endif %}
<script src="{{ asset('js/admin-seo-edit.js') }}"></script>
{% endblock %}