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

{% block title %}Proposer un livre · LivreComment{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .br-page {
            max-width: 520px;
            margin: 0 auto;
            padding: var(--space-4) 0;
        }
        .br-title {
            margin: 0 0 var(--space-1);
            font-size: clamp(1.4rem, 4vw, 1.8rem);
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        .br-sub {
            margin: 0 0 var(--space-4);
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.5;
        }
        .br-form label {
            display: block;
            margin-bottom: var(--space-1);
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--ink);
        }
        .br-form input[type="text"] {
            width: 100%;
            padding: 10px 14px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius);
            color: var(--ink);
            font-size: 1rem;
            transition: border-color 120ms, box-shadow 120ms;
        }
        .br-form input[type="text"]:focus {
            outline: none;
            border-color: var(--violet);
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 25%, transparent);
        }
        .br-field { margin-bottom: var(--space-3); }
        .br-help {
            margin-top: 6px;
            font-size: 0.82rem;
            color: var(--muted);
        }
        .br-submit {
            margin-top: var(--space-2);
            padding: 12px 24px;
            background: var(--violet);
            color: white;
            border: none;
            border-radius: var(--radius);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 120ms;
        }
        .br-submit:hover { background: color-mix(in oklab, var(--violet) 85%, black); }
        .br-error {
            color: #d63b3b;
            font-size: 0.85rem;
            margin-top: 6px;
        }
    </style>
{% endblock %}

{% block body %}
<div class="br-page">
    <h1 class="br-title">Proposer un livre</h1>
    <p class="br-sub">
        Indique le titre et l'auteur, on l'ajoute au catalogue si possible.
    </p>

    {{ form_start(form, {attr: {class: 'br-form'}}) }}

        <div class="br-field">
            {{ form_label(form.rawTitle) }}
            {{ form_widget(form.rawTitle) }}
            {{ form_errors(form.rawTitle, {attr: {class: 'br-error'}}) }}
        </div>

        <div class="br-field">
            {{ form_label(form.rawAuthor) }}
            {{ form_widget(form.rawAuthor) }}
            {{ form_errors(form.rawAuthor, {attr: {class: 'br-error'}}) }}
        </div>

        <div class="br-field">
            {{ form_label(form.rawIsbn) }}
            {{ form_widget(form.rawIsbn) }}
            {% if form.rawIsbn.vars.help %}
                <p class="br-help">{{ form.rawIsbn.vars.help }}</p>
            {% endif %}
            {{ form_errors(form.rawIsbn, {attr: {class: 'br-error'}}) }}
        </div>

        <button type="submit" class="br-submit">Envoyer ma proposition</button>

    {{ form_end(form) }}
</div>
{% endblock %}