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

{% block title %}{{ 'profile.change_password.title'|trans }}{% endblock %}

{% block sidebar %}
<div class="sidebar">
    <h5 class="mb-4">{{ 'profile.sidebar.title'|trans }}</h5>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="{{ path('app_profile') }}">
                <i class="fas fa-user me-2"></i> {{ 'profile.sidebar.overview'|trans }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ path('app_profile_edit') }}">
                <i class="fas fa-edit me-2"></i> {{ 'profile.sidebar.edit_profile'|trans }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="{{ path('app_profile_change_password') }}">
                <i class="fas fa-key me-2"></i> {{ 'profile.sidebar.change_password'|trans }}
            </a>
        </li>
    </ul>
</div>
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">{{ 'profile.change_password.title'|trans }}</h1>
        <a href="{{ path('app_profile') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> {{ 'profile.change_password.back_btn'|trans }}
        </a>
    </div>
    
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{{ 'profile.change_password.form_title'|trans }}</h5>
                </div>
                <div class="card-body">
                    {{ form_start(resetForm) }}
                        <div class="mb-3">
                            {{ form_row(resetForm.plainPassword.first, {
                                'label': 'profile.change_password.new_password'|trans
                            }) }}
                        </div>
                        <div class="mb-3">
                            {{ form_row(resetForm.plainPassword.second, {
                                'label': 'profile.change_password.repeat_password'|trans
                            }) }}
                        </div>
                        
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            {{ 'profile.change_password.warning'|trans }}
                        </div>
                    
                        <div class="d-flex justify-content-end">
                            <a href="{{ path('app_profile') }}" class="btn btn-outline-secondary me-2">{{ 'profile.change_password.cancel_btn'|trans }}</a>
                            <button type="submit" class="btn btn-gradient">{{ 'profile.change_password.save_btn'|trans }}</button>
                        </div>
                    {{ form_end(resetForm) }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}