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

{% block title %}Vos informations — Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Consultez et gérez vos informations personnelles Vulcan' Affûtage.{% endblock %}
{% block canonical %}information-client{% 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">Vos informations</h1>
        </div>
    </section>

    <section class="nhp-section nhp-section--light">
        <div class="nhp-wrap">
            {% if app.session.get('client_id') %}
                {% include 'compte/_tabs.html.twig' with { current: 'informations' } only %}

                <div class="acc-panel nhp-reveal d1" style="max-width:640px;">
                    <div class="acc-field-row">
                        <span class="acc-field-label">Titulaire</span>
                        <span class="acc-field-value">{{ app.session.get('client_prenom') }} {{ app.session.get('client_nom') }}</span>
                    </div>
                    <div class="acc-field-row">
                        <span class="acc-field-label">Adresse e-mail</span>
                        <span class="acc-field-value"><span class="hl">{{ app.session.get('client_email') }}</span></span>
                    </div>
                    <div style="margin-top:22px;">
                        <a href="{{ path('app_request_email_edit_password', {'email': app.session.get('client_email')}) }}" class="nhp-btn nhp-btn--ghost">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                            Modifier mon mot de passe
                        </a>
                    </div>
                </div>
            {% else %}
                <div class="acc-guest nhp-reveal">
                    <h2>Connectez-vous</h2>
                    <p>Accédez à vos informations et à votre espace client.</p>
                    <div class="acc-guest-actions">
                        <a href="{{ path('app_client_login') }}" class="nhp-btn nhp-btn--primary">Connexion</a>
                        <a href="{{ path('app_inscription') }}" class="nhp-btn nhp-btn--ghost">Inscription</a>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>

</main>
{% endblock %}

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