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

{% block title %}Mes réservations — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Vos réservations d'atelier : date, participants et statut.{% endblock %}
{% block canonical %}mes-reservations{% endblock %}
{% block seoIndex %}<meta name="robots" content="noindex, follow">{% endblock %}
{% block headerCompte %}gColor{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-pages.css') }}">
{% endblock %}

{% block body %}
<main class="nhp-main">

    <section class="v2-phero" data-v2-hero>
        <div class="nhp-wrap">
            <span class="nhp-eyebrow">Espace client</span>
            <h1 class="v2-phero-title">Mes <em>réservations</em>.</h1>
            <p class="v2-phero-sub">Vos ateliers réservés — dates, participants et statut.</p>
        </div>
    </section>

    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">
            {% include 'compte/_tabs.html.twig' with { current: 'reservations' } only %}

            <div class="acc-panel nhp-reveal d1">
                {% if reservations is empty %}
                    <h2 class="nhp-h2" style="font-size:1.4rem;margin-bottom:8px;">Aucune réservation pour l'instant.</h2>
                    <p class="pdet-desc" style="margin-bottom:22px;">
                        Réservez votre place pour un atelier de création de couteau — le paiement se fait
                        en ligne et votre place est confirmée immédiatement.
                    </p>
                    <a href="{{ path('app_ateliers') }}" class="nhp-btn nhp-btn--primary">Découvrir l'atelier</a>
                {% else %}
                    <div class="macc-list">
                        {% for resa in reservations %}
                            <article class="macc-item" data-acc-resa>
                                <div class="macc-head">
                                    <span class="macc-ref">{{ resa.creneau.atelier.titre }}</span>
                                    <span class="nhp-chip {{ {
                                        'confirmee': 'nhp-chip--dispo',
                                        'attente': 'nhp-chip--expo',
                                        'annulee': 'nhp-chip--vendu',
                                    }[resa.statut.value]|default('nhp-chip--vendu') }}">{{ resa.statut.label }}</span>
                                </div>
                                <p class="macc-meta">
                                    Le {{ resa.creneau.startAt|date('d/m/Y à H\\hi') }} ·
                                    {{ resa.places }} place{{ resa.places > 1 ? 's' }} ·
                                    {{ (resa.creneau.atelier.prix * resa.places)|number_format(2, ',', ' ') }} €
                                    {% if resa.paiement.value == 'paye' %} · payée{% endif %}
                                </p>
                                {% if resa.statut.value == 'confirmee' %}
                                    <p class="macc-note">Rendez-vous à la coutellerie, 26 rue Saint-Dominique à Clermont-Ferrand. Pantalon et chaussures fermées — tablier fourni.</p>
                                {% elseif resa.statut.value == 'attente' %}
                                    <p class="macc-note">Réservation en attente de paiement — si votre paiement vient d'être effectué, elle sera confirmée d'ici quelques instants.</p>
                                {% endif %}
                            </article>
                        {% endfor %}
                    </div>
                    <p class="pdet-desc" style="margin-top:18px;">Pour annuler ou reporter une réservation, appelez-nous : {{ setting('contact.phone') ?: '04 73 37 29 05' }}.</p>
                {% endif %}
            </div>
        </div>
    </section>

</main>
{% endblock %}

{% block other_javascripts %}
    <script src="{{ asset('scripts/ds-v2-app.js') }}" defer></script>
{% endblock %}