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

{% block title %}Change Password{% endblock %}

{% block body %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6 col-lg-5">

            <div class="mb-4">
                <a href="{{ path('app_home') }}"
                   class="back-link"
                   data-testid="link-back-home">
                    ← Back to Dashboard
                </a>
            </div>

            <div class="mb-4">
                <h1 class="user-name-heading">
                    Change Password
                </h1>
                <p class="wfbo-card-desc">
                    Choose a strong password with at least 8 characters
                </p>
            </div>

            <div class="card">
                <div class="card-body">

                    {% for flash in app.flashes('success') %}
                        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">
                            {{ flash }}
                        </div>
                    {% endfor %}
                    {% for flash in app.flashes('error') %}
                        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">
                            {{ flash }}
                        </div>
                    {% endfor %}

                    {{ form_start(changePasswordForm, {
                        attr: { 'data-testid': 'change-password-form', 'novalidate': 'novalidate', 'data-turbo': 'false' }
                    }) }}

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

                    <hr class="my-4">

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

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

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg" data-testid="btn-change-password">
                            Update Password
                        </button>
                    </div>

                    {{ form_end(changePasswordForm) }}

                </div>
            </div>

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