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

{% block title %}Mes propositions · LivreComment{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .mr-page { max-width: 720px; margin: 0 auto; padding: var(--space-4) 0; }
        .mr-title {
            margin: 0 0 var(--space-1);
            font-size: clamp(1.4rem, 4vw, 1.8rem);
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        .mr-sub { margin: 0 0 var(--space-4); color: var(--muted); font-size: 0.92rem; }
        .mr-cta {
            display: inline-block;
            margin-bottom: var(--space-3);
            padding: 8px 14px;
            background: var(--violet);
            color: white;
            border-radius: var(--radius);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .mr-list { list-style: none; padding: 0; margin: 0; }
        .mr-item {
            padding: var(--space-3);
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: var(--space-2);
        }
        .mr-item__title { margin: 0; font-size: 1rem; font-weight: 600; }
        .mr-item__meta { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }
        .mr-status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: 8px;
            vertical-align: middle;
        }
        .mr-status--pending  { background: color-mix(in oklab, #f59e0b 20%, transparent); color: #f59e0b; }
        .mr-status--approved { background: color-mix(in oklab, #10b981 20%, transparent); color: #10b981; }
        .mr-status--rejected { background: color-mix(in oklab, #6b7280 20%, transparent); color: var(--muted); }
        .mr-status--duplicate { background: color-mix(in oklab, var(--violet) 20%, transparent); color: var(--violet); }
        .mr-link { color: var(--violet); text-decoration: none; font-size: 0.9rem; }
        .mr-link:hover { text-decoration: underline; }
        .mr-empty { color: var(--muted); padding: var(--space-5) 0; text-align: center; }
    </style>
{% endblock %}

{% block body %}
<div class="mr-page">
    <h1 class="mr-title">Mes propositions</h1>
    <p class="mr-sub">Modération sous quelques jours.</p>

    <a href="{{ path('app_book_request_new') }}" class="mr-cta">Proposer un livre</a>

    {% if requests|length == 0 %}
        <p class="mr-empty">Tu n'as encore rien proposé.</p>
    {% else %}
        <ul class="mr-list">
            {% for r in requests %}
                <li class="mr-item">
                    <h2 class="mr-item__title">
                        {{ r.rawTitle }}
                        <span class="mr-status mr-status--{{ r.status.value }}">{{ r.status.label }}</span>
                    </h2>
                    <p class="mr-item__meta">
                        {{ r.rawAuthor }}
                        {% if r.rawIsbn %} · ISBN {{ r.rawIsbn }}{% endif %}
                        · proposé le {{ r.createdAt|date('d/m/Y') }}
                    </p>
                    {% if r.createdWork %}
                        <p style="margin-top: 8px;">
                            <a href="{{ path('app_work_show', {publicId: r.createdWork.publicId}) }}" class="mr-link">
                                Voir la fiche du livre →
                            </a>
                        </p>
                    {% endif %}
                    {% if r.moderatorNote %}
                        <p class="mr-item__meta" style="margin-top: 8px;"><em>Note du modérateur :</em> {{ r.moderatorNote }}</p>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
</div>
{% endblock %}