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

{% block title %}Mon compte — VIIZIA{% endblock %}

{% block body %}
{% from 'admin/organization/_form.html.twig' import field %}

<div class="level">
    <div class="level-left">
        <div>
            <p class="title is-4">
                <span class="icon-text">
                    <span class="icon"><i class="fas fa-user-circle"></i></span>
                    <span>Mon compte</span>
                </span>
            </p>
            <p class="subtitle is-6 has-text-grey">
                {{ app.user.email }}
                {% if app.user.isSuperadmin %}<span class="tag is-warning is-light ml-2">SUPERADMIN</span>{% endif %}
            </p>
        </div>
    </div>
</div>

<div class="tabs is-boxed" data-controller="tabs">
    <ul>
        <li data-tabs-target="tab" data-tab="informations" class="is-active">
            <a>
                <span class="icon is-small"><i class="fas fa-id-card"></i></span>
                <span>Informations</span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="securite">
            <a>
                <span class="icon is-small"><i class="fas fa-lock"></i></span>
                <span>Sécurité</span>
            </a>
        </li>
        <li data-tabs-target="tab" data-tab="preferences">
            <a>
                <span class="icon is-small"><i class="fas fa-sliders"></i></span>
                <span>Préférences</span>
            </a>
        </li>
    </ul>
</div>

{# --- Onglet Informations -------------------------------------------------- #}
<section data-tabs-target="panel" data-tab="informations">
    {{ form_start(profile_form, {'attr': {'novalidate': 'novalidate'}}) }}

        {% if profile_form.vars.errors|length > 0 %}
            <div class="notification is-danger is-light">
                <span class="icon"><i class="fas fa-circle-exclamation"></i></span>
                <strong>Le formulaire contient des erreurs :</strong>
                <ul class="mt-2">
                    {% for error in profile_form.vars.errors %}<li>{{ error.message }}</li>{% endfor %}
                </ul>
            </div>
        {% endif %}

        <div class="box">
            <h3 class="title is-5">
                <span class="icon-text">
                    <span class="icon"><i class="fas fa-id-card"></i></span>
                    <span>Identité</span>
                </span>
            </h3>

            <div class="columns">
                <div class="column">{{ field(profile_form.firstName, {'icon': 'user'}) }}</div>
                <div class="column">{{ field(profile_form.lastName, {'icon': 'user'}) }}</div>
            </div>
            {{ field(profile_form.email, {'icon': 'envelope'}) }}
        </div>

        <div class="box">
            <h3 class="title is-5">
                <span class="icon-text">
                    <span class="icon"><i class="fas fa-cake-candles"></i></span>
                    <span>Naissance</span>
                </span>
            </h3>

            <div class="notification is-info is-light is-size-7">
                <span class="icon"><i class="fas fa-circle-info"></i></span>
                Ces informations sont optionnelles. Elles enrichissent votre profil et serviront
                à la conformité KYC lors de futures intégrations bancaires.
            </div>

            <div class="columns">
                <div class="column">{{ field(profile_form.birthDate, {'icon': 'calendar', 'type': 'date'}) }}</div>
                <div class="column">{{ field(profile_form.birthPlace, {'icon': 'location-dot'}) }}</div>
            </div>
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button type="submit" class="button is-primary">
                    <span class="icon"><i class="fas fa-floppy-disk"></i></span>
                    <span>Enregistrer les informations</span>
                </button>
            </div>
        </div>

    {{ form_end(profile_form) }}
</section>

{# --- Onglet Sécurité ----------------------------------------------------- #}
<section data-tabs-target="panel" data-tab="securite" style="display: none;">
    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="fas fa-key"></i></span>
                <span>Changer le mot de passe</span>
            </span>
        </h3>

        {{ form_start(password_form, {'action': path('app_account_password'), 'attr': {'novalidate': 'novalidate'}}) }}

            {% if password_form.vars.errors|length > 0 %}
                <div class="notification is-danger is-light">
                    <span class="icon"><i class="fas fa-circle-exclamation"></i></span>
                    <ul class="mt-2">
                        {% for error in password_form.vars.errors %}<li>{{ error.message }}</li>{% endfor %}
                    </ul>
                </div>
            {% endif %}

            {{ field(password_form.currentPassword, {'icon': 'lock'}) }}
            {{ field(password_form.newPassword.first, {'icon': 'key'}) }}
            {{ field(password_form.newPassword.second, {'icon': 'key'}) }}

            <div class="field is-grouped">
                <div class="control">
                    <button type="submit" class="button is-primary">
                        <span class="icon"><i class="fas fa-shield-halved"></i></span>
                        <span>Mettre à jour le mot de passe</span>
                    </button>
                </div>
            </div>

        {{ form_end(password_form) }}
    </div>

    <div class="box">
        <h3 class="title is-6 has-text-grey">
            <span class="icon-text">
                <span class="icon"><i class="fas fa-clock-rotate-left"></i></span>
                <span>Dernière connexion</span>
            </span>
        </h3>
        <p class="is-size-7 has-text-grey">
            {% if app.user.lastLoginAt %}
                {{ app.user.lastLoginAt|date('d/m/Y à H:i') }}
            {% else %}
                Aucune connexion enregistrée.
            {% endif %}
        </p>
    </div>
</section>

{# --- Onglet Préférences -------------------------------------------------- #}
<section data-tabs-target="panel" data-tab="preferences" style="display: none;">
    <div class="box">
        <h3 class="title is-5">
            <span class="icon-text">
                <span class="icon"><i class="fas fa-palette"></i></span>
                <span>Apparence</span>
            </span>
        </h3>

        <p class="content is-size-7 has-text-grey">
            Le choix s'applique immédiatement et est mémorisé sur cet appareil.
        </p>

        <div class="field" data-controller="theme">
            <div class="control">
                <label class="radio mr-4">
                    <input type="radio" name="viz-theme" value="light" data-theme-target="option">
                    <span class="icon-text">
                        <span class="icon"><i class="fas fa-sun"></i></span>
                        <span>Clair</span>
                    </span>
                </label>
                <label class="radio mr-4">
                    <input type="radio" name="viz-theme" value="dark" data-theme-target="option">
                    <span class="icon-text">
                        <span class="icon"><i class="fas fa-moon"></i></span>
                        <span>Sombre</span>
                    </span>
                </label>
                <label class="radio">
                    <input type="radio" name="viz-theme" value="system" data-theme-target="option">
                    <span class="icon-text">
                        <span class="icon"><i class="fas fa-desktop"></i></span>
                        <span>Système</span>
                    </span>
                </label>
            </div>
            <p class="help">
                <strong>Système</strong> suit la préférence de votre OS / navigateur
                (<code>prefers-color-scheme</code>).
            </p>
        </div>
    </div>
</section>

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/tabs.js') }}" defer></script>
    <script src="{{ asset('js/theme.js') }}" defer></script>
{% endblock %}
{% endblock %}