{% extends 'base.html.twig' %}
{% block title %}Mon profil - ServerControl{% endblock %}

{% block body %}
<div class="row justify-content-center">
    <div class="col-md-5">

        <h2 class="h4 mb-4"><i class="bi bi-person-circle me-2"></i>Mon profil</h2>

        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center"
                         style="width:52px;height:52px;flex-shrink:0;">
                        <i class="bi bi-person-fill text-white fs-4"></i>
                    </div>
                    <div>
                        <div class="fw-bold fs-5">{{ app.user.pseudo }}</div>
                        <div class="text-muted small">{{ app.user.email }}</div>
                        <div class="mt-1">
                            {% for role in app.user.roles %}
                                {% if role != 'ROLE_USER' %}
                                <span class="badge bg-{{ role == 'ROLE_ADMIN' ? 'danger' : 'primary' }} small">
                                    {{ role|replace({'ROLE_': ''}) }}
                                </span>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <strong><i class="bi bi-key me-2"></i>Changer le mot de passe</strong>
            </div>
            <div class="card-body">
                {{ form_start(form) }}

                <div class="mb-3">
                    {{ form_label(form.currentPassword, null, {label_attr: {class: 'form-label fw-semibold small'}}) }}
                    {{ form_widget(form.currentPassword, {attr: {class: 'form-control'}}) }}
                    {{ form_errors(form.currentPassword) }}
                </div>

                <div class="mb-3">
                    {{ form_label(form.newPassword.first, null, {label_attr: {class: 'form-label fw-semibold small'}}) }}
                    {{ form_widget(form.newPassword.first, {attr: {class: 'form-control'}}) }}
                    {{ form_errors(form.newPassword.first) }}
                </div>

                <div class="mb-4">
                    {{ form_label(form.newPassword.second, null, {label_attr: {class: 'form-label fw-semibold small'}}) }}
                    {{ form_widget(form.newPassword.second, {attr: {class: 'form-control'}}) }}
                    {{ form_errors(form.newPassword.second) }}
                    {{ form_errors(form.newPassword) }}
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-floppy me-1"></i>Enregistrer
                </button>

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

    </div>
</div>
{% endblock %}