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

{% block title %}Erreur {{ page.errorCode }} — Admin{% endblock %}
{% block page_title %}Page d'erreur {{ page.errorCode }}{% endblock %}
{% block page_subtitle %}{{ page.heading }}{% 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>
    <a href="{{ path('app_admin_error_index') }}">Pages d'erreur</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ page.errorCode }}</span>
</nav>

<div style="padding:12px 0;font-size:.82rem;color:var(--muted);position:relative;z-index:1">
    <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:1.8;vertical-align:-2px;margin-right:4px"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
    Cette page n'est pas indexée par les moteurs de recherche.
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">

<form id="error-form" novalidate data-submit-url="{{ path('app_admin_error_edit', {uuid: page.uuid}) }}">
<div class="adm-card adm-form-card" style="max-width:800px">
    <div class="adm-form-fields">
        <div class="adm-field">
            <label>Titre</label>
            <input type="text" name="heading" value="{{ page.heading }}" placeholder="Titre affiché">
        </div>
        <div class="adm-field">
            <label>Contenu</label>
            <textarea name="body" rows="12" style="font-family:monospace;font-size:.82rem;line-height:1.6">{{ page.body }}</textarea>
        </div>
        <div class="adm-field">
            <label>Image d'illustration</label>
            <input type="hidden" name="imageCropped" id="error-img-cropped">
            <div class="adm-upload-zone" id="error-img-zone" data-crop="error-img" data-ratio="0">
                <img class="adm-upload-preview{% if not page.image %} hidden{% endif %}" id="error-img-preview"
                     src="{{ page.image ? asset(page.image) : '' }}" alt="Image">
                <div class="adm-upload-placeholder{% if page.image %} hidden{% endif %}" id="error-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/*,.svg">
            </div>
            <div class="adm-upload-actions{% if not page.image %} hidden{% endif %}" id="error-img-actions">
                <button type="button" class="adm-crop-btn" data-recrop="error-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="error-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="error-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="error-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>
        </div>
    </div>
    <div class="adm-form-actions">
        <button type="submit" class="adm-btn adm-btn-p" id="error-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>
        <a href="{{ path('app_admin_error_index') }}" class="adm-btn adm-btn-g">Retour</a>
    </div>
</div>
</form>

{# ── Crop modal ── #}
<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</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" id="crop-flip-h" title="Retourner H"><svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><line x1="12" y1="2" x2="12" y2="22" stroke-dasharray="3 3"/></svg></button>
                <button type="button" class="adm-crop-btn" id="crop-flip-v" title="Retourner V"><svg viewBox="0 0 24 24"><path d="M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3"/><path d="M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><line x1="2" y1="12" x2="22" y2="12" stroke-dasharray="3 3"/></svg></button>
                <span class="adm-crop-sep"></span>
                <button type="button" class="adm-crop-btn adm-crop-ratio active" data-ratio="0" title="Libre">Libre</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="1.777" title="16:9">16:9</button>
                <button type="button" class="adm-crop-btn adm-crop-ratio" data-ratio="1" title="1:1">1:1</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">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
                    Valider
                </button>
            </div>
        </div>
    </div>
</div>

{# ── Lightbox ── #}
<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>
{% endblock %}

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