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

{% block title %}Erreur {{ page.errorCode }} — Admin{% endblock %}
{% block page_title %}Erreur {{ page.errorCode }}{% endblock %}
{% block page_subtitle %}Fiche page d'erreur{% 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="display:flex;flex-wrap:wrap;gap:16px">

    {# ── Infos ── #}
    <div class="adm-card" style="padding:24px;position:relative;z-index:1;width:280px;flex-shrink:0">
        <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:400;color:var(--text);margin-bottom:16px">Informations</h3>

        <div style="display:flex;flex-direction:column;gap:12px">
            <div class="adm-show-field">
                <span class="adm-show-label">Code HTTP</span>
                <span class="adm-pill adm-pill-banned" style="font-size:.72rem">{{ page.errorCode }}</span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Titre</span>
                <span class="adm-show-value">{{ page.heading }}</span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Image</span>
                {% if page.image %}
                    <img src="{{ asset(page.image) }}" alt="" style="max-width:100%;border-radius:8px;margin-top:4px">
                {% else %}
                    <span class="adm-show-value" style="color:var(--muted)">Illustration SVG par défaut</span>
                {% endif %}
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Indexation</span>
                <span style="color:var(--red);font-size:.78rem;font-weight:500">noindex</span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Dernière modification</span>
                <span class="adm-show-value">{{ page.updatedAt ? page.updatedAt|date('d/m/Y à H:i') : '—' }}</span>
            </div>
        </div>

        <div style="display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(180,190,220,.2)">
            {% if is_granted('ROLE_ADMIN') %}
            <a href="{{ path('app_admin_error_edit', {uuid: page.uuid}) }}" class="adm-btn adm-btn-p adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Modifier
            </a>
            {% endif %}
            <a href="/_error/{{ page.errorCode }}" target="_blank" class="adm-btn adm-btn-g adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                Tester la page
            </a>
            <a href="{{ path('app_admin_error_index') }}" class="adm-btn adm-btn-g adm-btn-sm">Retour</a>
        </div>
    </div>

    {# ── Preview ── #}
    <div class="adm-card" style="padding:0;position:relative;z-index:1;flex:1;min-width:460px;overflow:hidden">
        {# Browser bar #}
        <div style="padding:10px 16px;background:rgba(255,107,138,.05);border-bottom:1px solid rgba(255,107,138,.15);display:flex;align-items:center;gap:8px">
            <div style="display:flex;gap:5px">
                <span style="width:10px;height:10px;border-radius:50%;background:#ff6b6b"></span>
                <span style="width:10px;height:10px;border-radius:50%;background:#ffa94d"></span>
                <span style="width:10px;height:10px;border-radius:50%;background:#69db7c"></span>
            </div>
            <span style="font-size:.72rem;color:var(--red);font-family:monospace">/_error/{{ page.errorCode }}</span>
        </div>

        {# Page content — reproducing the real error page #}
        <div style="position:relative;background:#f0f2fb;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden">

            {# Blobs #}
            <div style="position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(70px);opacity:.35;background:radial-gradient(circle,#c5d0fc,#e8e4ff);top:-100px;left:-80px"></div>
            <div style="position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(70px);opacity:.35;background:radial-gradient(circle,#fce4f3,#f5d0f8);bottom:-60px;right:-50px"></div>

            {# Card #}
            <div style="position:relative;width:380px;max-width:calc(100% - 40px);padding:36px 34px 34px;background:rgba(255,255,255,0.55);border:1.5px solid rgba(255,255,255,0.85);border-radius:24px;backdrop-filter:blur(18px);box-shadow:0 8px 48px rgba(120,130,160,0.13),inset 0 1px 0 rgba(255,255,255,0.9);z-index:1">
                <div style="position:absolute;inset:0;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 60%);pointer-events:none"></div>

                {# Logo #}
                {% if siteParams.logo %}
                <div style="width:36px;height:36px;margin-bottom:22px;position:relative;z-index:1">
                    <img src="{{ asset(siteParams.logo) }}" alt="" style="width:36px;height:36px;object-fit:contain;border-radius:8px">
                </div>
                {% else %}
                <div style="width:36px;height:36px;background:linear-gradient(135deg,#7C9EFF,#C3B8F8);border-radius:10px;margin-bottom:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(124,158,255,0.3);position:relative;z-index:1">
                    <svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:#fff"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </div>
                {% endif %}

                {# Icon card #}
                <div style="width:100%;background:rgba(255,255,255,0.48);border:1.5px solid rgba(255,255,255,0.92);border-radius:16px;backdrop-filter:blur(12px);box-shadow:0 4px 24px rgba(124,158,255,0.09),inset 0 1px 0 rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;padding:10px;margin-bottom:24px;position:relative;z-index:1;overflow:hidden">
                    <div style="position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent)"></div>
                    {% if page.image %}
                        <img src="{{ asset(page.image) }}" alt="" style="max-width:180px;max-height:130px;object-fit:contain;border-radius:8px">
                    {% else %}
                        {% if page.errorCode == 403 %}
                        <svg viewBox="0 0 320 320" style="width:130px;height:130px">
                            <defs><linearGradient id="pv1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#7C9EFF"/><stop offset="100%" stop-color="#C3B8F8"/></linearGradient></defs>
                            <ellipse cx="160" cy="155" rx="118" ry="110" fill="#C3B8F8" opacity="0.18"/>
                            <ellipse cx="160" cy="155" rx="72" ry="66" fill="#7C9EFF" opacity="0.10"/>
                            <path d="M122 152 L122 134 Q122 104 160 104 Q198 104 198 134 L198 152" fill="none" stroke="url(#pv1)" stroke-width="14" stroke-linecap="round"/>
                            <path d="M126 152 L126 136 Q126 112 160 112 Q194 112 194 136 L194 152" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
                            <rect x="116" y="152" width="88" height="68" rx="14" fill="url(#pv1)"/>
                            <rect x="116" y="152" width="88" height="22" rx="14" fill="white" opacity="0.15"/>
                            <circle cx="160" cy="177" r="11" fill="white" opacity="0.22"/>
                            <circle cx="160" cy="177" r="7" fill="rgba(124,158,255,0.80)"/>
                            <rect x="156.5" y="182" width="7" height="15" rx="3" fill="rgba(124,158,255,0.90)"/>
                            <circle cx="56" cy="90" r="4" fill="#C3B8F8" opacity="0.50"/><circle cx="268" cy="84" r="3" fill="#7C9EFF" opacity="0.40"/>
                            <circle cx="280" cy="180" r="4" fill="#C3B8F8" opacity="0.35"/><circle cx="72" cy="228" r="2" fill="#7C9EFF" opacity="0.28"/>
                        </svg>
                        {% elseif page.errorCode == 404 %}
                        <svg viewBox="0 0 320 320" style="width:130px;height:130px">
                            <defs><linearGradient id="pv2" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#7C9EFF"/><stop offset="100%" stop-color="#C3B8F8"/></linearGradient></defs>
                            <ellipse cx="160" cy="150" rx="116" ry="108" fill="#7C9EFF" opacity="0.12"/>
                            <ellipse cx="160" cy="150" rx="70" ry="64" fill="#C3B8F8" opacity="0.10"/>
                            <circle cx="146" cy="142" r="46" fill="rgba(124,158,255,0.13)" stroke="url(#pv2)" stroke-width="11"/>
                            <circle cx="146" cy="142" r="46" fill="none" stroke="white" stroke-width="2.5" opacity="0.20"/>
                            <path d="M126 122 Q140 112 158 116" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" opacity="0.45"/>
                            <line x1="180" y1="176" x2="213" y2="211" stroke="url(#pv2)" stroke-width="16" stroke-linecap="round"/>
                            <line x1="180" y1="176" x2="213" y2="211" stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.22"/>
                            <line x1="130" y1="128" x2="162" y2="158" stroke="url(#pv2)" stroke-width="5.5" stroke-linecap="round" opacity="0.70"/>
                            <line x1="162" y1="128" x2="130" y2="158" stroke="url(#pv2)" stroke-width="5.5" stroke-linecap="round" opacity="0.70"/>
                            <circle cx="52" cy="88" r="4" fill="#C3B8F8" opacity="0.50"/><circle cx="270" cy="84" r="3" fill="#7C9EFF" opacity="0.40"/>
                            <circle cx="282" cy="182" r="4" fill="#C3B8F8" opacity="0.35"/><circle cx="70" cy="230" r="2" fill="#7C9EFF" opacity="0.28"/>
                        </svg>
                        {% else %}
                        <svg viewBox="0 0 320 320" style="width:130px;height:130px">
                            <defs>
                                <linearGradient id="pv3" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#7C9EFF"/><stop offset="100%" stop-color="#C3B8F8"/></linearGradient>
                                <linearGradient id="pv3b" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C3B8F8"/><stop offset="100%" stop-color="#7C9EFF"/></linearGradient>
                            </defs>
                            <ellipse cx="160" cy="152" rx="118" ry="112" fill="#C3B8F8" opacity="0.14"/>
                            <ellipse cx="160" cy="152" rx="76" ry="70" fill="#7C9EFF" opacity="0.10"/>
                            <ellipse cx="160" cy="152" rx="42" ry="38" fill="#C3B8F8" opacity="0.10"/>
                            <polygon points="175,82 142,152 164,152 148,222 190,142 166,142" fill="url(#pv3b)"/>
                            <polygon points="175,82 142,152 154,152 182,92" fill="white" opacity="0.22"/>
                            <polygon points="170,96 150,150 165,150 152,210 185,148 168,148" fill="white" opacity="0.10"/>
                            <line x1="116" y1="118" x2="100" y2="108" stroke="url(#pv3)" stroke-width="2.5" stroke-linecap="round" opacity="0.60"/>
                            <line x1="112" y1="133" x2="93" y2="133" stroke="url(#pv3)" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
                            <line x1="202" y1="148" x2="219" y2="138" stroke="url(#pv3)" stroke-width="2.5" stroke-linecap="round" opacity="0.60"/>
                            <line x1="204" y1="163" x2="222" y2="165" stroke="url(#pv3)" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
                            <circle cx="54" cy="90" r="4" fill="#C3B8F8" opacity="0.50"/><circle cx="268" cy="86" r="3" fill="#7C9EFF" opacity="0.40"/>
                            <circle cx="280" cy="182" r="4" fill="#C3B8F8" opacity="0.35"/><circle cx="70" cy="232" r="2" fill="#7C9EFF" opacity="0.28"/>
                        </svg>
                        {% endif %}
                    {% endif %}
                </div>

                {# Badge #}
                <div style="position:relative;z-index:1">
                    <span style="display:inline-flex;align-items:center;gap:6px;font-size:.70rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7C9EFF;background:rgba(124,158,255,.10);border:1px solid rgba(124,158,255,.22);border-radius:50px;padding:4px 12px;margin-bottom:14px">
                        <span style="width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#7C9EFF,#C3B8F8);flex-shrink:0"></span>
                        Erreur {{ page.errorCode }}
                    </span>

                    {# Title #}
                    <h2 style="font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400;color:#1a1a2e;letter-spacing:-0.02em;line-height:1.2;margin-bottom:10px">{{ page.heading }}</h2>

                    {# Body #}
                    <div style="font-size:.84rem;color:#8a8fa8;font-weight:300;line-height:1.65;margin-bottom:24px">{{ page.body|raw }}</div>

                    {# Divider #}
                    <div style="width:100%;height:1px;background:rgba(180,190,220,.40);margin-bottom:20px"></div>

                    {# Buttons #}
                    {% if page.errorCode == 403 %}
                    <div style="width:100%;padding:13px;background:linear-gradient(135deg,#7C9EFF,#C3B8F8);color:#fff;border-radius:12px;text-align:center;font-size:.88rem;font-weight:500;box-shadow:0 4px 18px rgba(124,158,255,0.33);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>
                        Se connecter
                    </div>
                    <div style="width:100%;padding:11px;background:rgba(255,255,255,.70);border:1.5px solid rgba(200,210,240,.7);border-radius:12px;text-align:center;font-size:.85rem;color:#1a1a2e;display:flex;align-items:center;justify-content:center;gap:8px">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><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>
                        Retour à l'accueil
                    </div>
                    {% elseif page.errorCode == 404 %}
                    <div style="width:100%;padding:13px;background:linear-gradient(135deg,#7C9EFF,#C3B8F8);color:#fff;border-radius:12px;text-align:center;font-size:.88rem;font-weight:500;box-shadow:0 4px 18px rgba(124,158,255,0.33);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><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>
                        Retour à l'accueil
                    </div>
                    <div style="width:100%;padding:11px;background:rgba(255,255,255,.70);border:1.5px solid rgba(200,210,240,.7);border-radius:12px;text-align:center;font-size:.85rem;color:#1a1a2e;display:flex;align-items:center;justify-content:center;gap:8px">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><polyline points="15 18 9 12 15 6"/></svg>
                        Page précédente
                    </div>
                    {% else %}
                    <div style="width:100%;padding:13px;background:linear-gradient(135deg,#7C9EFF,#C3B8F8);color:#fff;border-radius:12px;text-align:center;font-size:.88rem;font-weight:500;box-shadow:0 4px 18px rgba(124,158,255,0.33);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.5"/></svg>
                        Réessayer
                    </div>
                    <div style="width:100%;padding:11px;background:rgba(255,255,255,.70);border:1.5px solid rgba(200,210,240,.7);border-radius:12px;text-align:center;font-size:.85rem;color:#1a1a2e;display:flex;align-items:center;justify-content:center;gap:8px">
                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><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>
                        Retour à l'accueil
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}