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

{% block title %}{{ marque.name }} — Marques — Admin{% endblock %}
{% block page_title %}{{ marque.name }}{% endblock %}
{% block page_subtitle %}Fiche marque partenaire{% 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_marque_index') }}">Marques partenaires</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ marque.name }}</span>
</nav>

<div class="adm-card" style="padding:28px;position:relative;z-index:1;max-width:600px">
    <div style="display:flex;align-items:center;gap:16px;margin-bottom:24px">
        <div style="width:52px;height:52px;border-radius:12px;background:rgba(124,158,255,.1);border:1.5px solid rgba(124,158,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0">
            {% if marque.logoPath %}
                <img src="{{ asset(marque.logoPath) }}" alt="{{ marque.name }}" style="width:36px;height:36px;object-fit:contain;border-radius:6px">
            {% else %}
                <svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:none;stroke:var(--muted);stroke-width:1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
            {% endif %}
        </div>
        <div>
            <h2 style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--text);margin:0">{{ marque.name }}</h2>
            <span class="adm-pill {% if marque.isActive %}adm-pill-active{% else %}adm-pill-paused{% endif %}" style="margin-top:4px;display:inline-block">
                {{ marque.isActive ? 'Affichée' : 'Masquée' }}
            </span>
        </div>
    </div>

    <div style="display:flex;flex-direction:column;gap:16px">
        <div class="adm-show-field">
            <span class="adm-show-label">Catégorie</span>
            <span class="adm-show-value">{{ marque.category ?: '—' }}</span>
        </div>
        <div class="adm-show-field">
            <span class="adm-show-label">Site web</span>
            {% if marque.websiteUrl %}
            <a href="{{ marque.websiteUrl }}" target="_blank" rel="noopener" class="adm-show-value" style="color:var(--accent);text-decoration:none;word-break:break-all">
                {{ marque.websiteUrl }}
                <svg viewBox="0 0 24 24" style="width:12px;height:12px;stroke:var(--accent);fill:none;stroke-width:2;vertical-align:middle;margin-left: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>
            </a>
            {% else %}
            <span class="adm-show-value">—</span>
            {% endif %}
        </div>
        <div class="adm-show-field">
            <span class="adm-show-label">Position</span>
            <span class="adm-show-value">{{ marque.position }}</span>
        </div>
        <div class="adm-show-field">
            <span class="adm-show-label">Créée le</span>
            <span class="adm-show-value">{{ marque.createdAt|date('d/m/Y à H:i') }}</span>
        </div>
        <div class="adm-show-field">
            <span class="adm-show-label">Modifiée le</span>
            <span class="adm-show-value">{{ marque.updatedAt ? marque.updatedAt|date('d/m/Y à H:i') : '—' }}</span>
        </div>
    </div>

    <div style="display:flex;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(180,190,220,.2)">
        {% if is_granted('ROLE_ADMIN') %}
        <a href="{{ path('app_admin_marque_edit', {uuid: marque.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="{{ path('app_admin_marque_index') }}" class="adm-btn adm-btn-g adm-btn-sm">Retour à la liste</a>
    </div>
</div>

{% endblock %}