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

{% block title %}{{ page.pageLabel }} — Admin{% endblock %}
{% block page_title %}{{ page.pageLabel }}{% endblock %}
{% block page_subtitle %}Fiche page légale{% 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_legal_index') }}">Pages légales</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ page.pageLabel }}</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">Route</span>
                <code style="font-size:.78rem;background:rgba(124,158,255,.08);padding:2px 6px;border-radius:4px">{{ page.routeName }}</code>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">Titre (H1)</span>
                <span class="adm-show-value">{{ page.heading }}</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>
            {% if seo %}
            <div class="adm-show-field">
                <span class="adm-show-label">SEO Title</span>
                <span class="adm-show-value">{{ seo.title ?? '—' }}</span>
            </div>
            <div class="adm-show-field">
                <span class="adm-show-label">SEO Description</span>
                <span class="adm-show-value" style="font-size:.78rem;color:var(--muted)">{{ seo.metaDescription ?? '—' }}</span>
            </div>
            {% endif %}
        </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_legal_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 le contenu
            </a>
            {% endif %}
            {% if seo %}
            <a href="{{ path('app_admin_seo_edit', {uuid: seo.uuid}) }}" class="adm-btn adm-btn-g adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                Modifier le SEO
            </a>
            {% endif %}
            <a href="{{ path(page.routeName) }}" 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>
                Voir la page
            </a>
            <a href="{{ path('app_admin_legal_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(124,158,255,.05);border-bottom:1px solid rgba(200,210,240,.3);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(--muted);font-family:monospace">{{ page.routeName }}</span>
        </div>

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

            <div style="position:relative;z-index:1;margin:0 auto;padding:32px 28px 40px">

                {# Header #}
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:28px">
                    {% if siteParams.logo %}
                    <div style="width:34px;height:34px;flex-shrink:0">
                        <img src="{{ asset(siteParams.logo) }}" alt="" style="width:34px;height:34px;object-fit:contain;border-radius:9px">
                    </div>
                    {% else %}
                    <div style="width:34px;height:34px;background:linear-gradient(135deg,#7C9EFF,#C3B8F8);border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(124,158,255,.3);flex-shrink:0">
                        <svg viewBox="0 0 24 24" style="width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    </div>
                    {% endif %}
                    <div>
                        <div style="font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;color:#1a1a2e;letter-spacing:-.02em;line-height:1.1">{{ page.heading }}</div>
                        <div style="font-size:.76rem;color:#8a8fa8;font-weight:300;margin-top:2px">{{ page.pageLabel }}</div>
                    </div>
                </div>

                {# Card content #}
                <div style="background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.85);border-radius:20px;backdrop-filter:blur(18px);box-shadow:0 8px 48px rgba(120,130,160,.13),inset 0 1px 0 rgba(255,255,255,.9);padding:36px 38px;position:relative;overflow:hidden">
                    <div style="position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%);pointer-events:none"></div>
                    <div style="position:relative;z-index:1;font-size:.82rem;color:#3a3d52;font-weight:300;line-height:1.75">
                        {{ page.body|raw }}
                    </div>
                </div>

                {# Update date #}
                <div style="text-align:center;font-size:.72rem;color:#8a8fa8;margin-top:20px;font-weight:300">
                    Dernière mise à jour : {{ page.updatedAt ? page.updatedAt|date('d/m/Y') : '—' }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}