{% extends 'base.html.twig' %}

{% block title %}Listes · LivreComment{% endblock %}

{% block body_class %}page-wide{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .lists-page-header {
            margin-top: var(--space-3);
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: var(--space-3);
        }
        .lists-page-header h1 {
            margin: 0;
            font-size: clamp(1.4rem, 4vw, 1.8rem);
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        .lists-page-header__new {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--violet);
        }
        .lists-page-header__new:hover { text-decoration: underline; }

        /* ========== Barre de recherche listes ========== */
        .lists-search {
            display: flex;
            margin-top: var(--space-4);
            background: var(--bg-elevated);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius);
            padding: 4px;
            transition: border-color 120ms, box-shadow 120ms;
        }
        .lists-search:focus-within {
            border-color: var(--violet);
            box-shadow: 0 0 0 3px var(--violet-soft);
        }
        .lists-search input[type="search"] {
            flex: 1;
            border: none;
            background: transparent;
            padding: 8px 12px;
            font-size: 16px;
            font-family: inherit;
            color: var(--ink);
            min-height: 40px;
        }
        .lists-search input[type="search"]:focus { outline: none; box-shadow: none; }
        .lists-search button {
            background: var(--ink);
            color: var(--bg);
            border: 0;
            border-radius: calc(var(--radius) - 4px);
            padding: 0 16px;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            min-height: 40px;
        }
        .lists-search button:hover { background: color-mix(in srgb, var(--ink) 88%, var(--violet)); }
        .lists-search__clear {
            background: transparent !important;
            color: var(--muted) !important;
            font-weight: 400 !important;
            padding: 0 12px !important;
        }
        .lists-search__clear:hover { color: var(--ink) !important; }

        /* ========== Sections ========== */
        .lists-section { margin-top: var(--space-5); }
        .lists-section__title {
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--ink);
            margin: 0 0 var(--space-3);
        }

        /* ========== États vides ========== */
        .lists-empty {
            padding: var(--space-4);
            text-align: center;
            color: var(--muted);
            background: var(--bg-paper);
            border-radius: var(--radius);
            font-size: 0.95rem;
        }
        .lists-empty__sub {
            display: block;
            margin-top: 6px;
            font-size: 0.85rem;
            color: var(--subtle);
        }
    </style>
{% endblock %}

{% block body %}
    <header class="lists-page-header">
        <h1>Listes</h1>
        <a href="{{ path('app_lists_new') }}" class="lists-page-header__new">+ Nouvelle</a>
    </header>

    <form method="get" action="{{ path('app_lists_index') }}" class="lists-search" role="search">
        <label for="lists-q" class="sr-only">Cherche une liste</label>
        <input
            type="search"
            id="lists-q"
            name="q"
            value="{{ query }}"
            placeholder="Cherche une liste par son nom…"
            autocomplete="off"
            inputmode="search"
        >
        {% if query %}
            <a href="{{ path('app_lists_index') }}" class="lists-search__clear" style="display: inline-flex; align-items: center;">Effacer</a>
        {% endif %}
        <button type="submit">Chercher</button>
    </form>

    {% if query %}
        <section class="lists-section">
            <h2 class="lists-section__title">Résultats pour « {{ query }} »</h2>
            {% if public_lists|length > 0 %}
                {% for list in public_lists %}{% include 'lists/_list_row.html.twig' with { list: list, mode: 'discover' } only %}{% endfor %}
            {% else %}
                <p class="lists-empty">
                    Aucune liste ne correspond.
                    <span class="lists-empty__sub">Lance-toi : crée la première sur ce thème.</span>
                </p>
            {% endif %}
        </section>
    {% else %}
        <section class="lists-section">
            <h2 class="lists-section__title">À découvrir</h2>
            {% if public_lists|length > 0 %}
                {% for list in public_lists %}{% include 'lists/_list_row.html.twig' with { list: list, mode: 'discover' } only %}{% endfor %}
            {% else %}
                <p class="lists-empty">
                    Personne n'a encore partagé de liste publique.
                    <span class="lists-empty__sub">Sois la première à en publier une.</span>
                </p>
            {% endif %}
        </section>

        {% if my_lists|length > 0 %}
            <section class="lists-section">
                <h2 class="lists-section__title">Les miennes</h2>
                {% for list in my_lists %}{% include 'lists/_list_row.html.twig' with { list: list, mode: 'mine' } only %}{% endfor %}
            </section>
        {% endif %}
    {% endif %}
{% endblock %}