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

{% block title %}Reset Password{% endblock %}

{% block body %}
    <div class="min-vh-100 d-flex align-items-center justify-content-center" style="background-image: url('{{ asset('images/page-bg.png') }}');background-size: auto;background-position: center;background-repeat: repeat;">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card shadow border-0 rounded-3">
                        <div class="card-header text-white text-center py-3" style="background-color: #ff6900;">
                            <h3 class="mb-0 fw-bold">
                                <i class="fi fi-sr-lock me-2"></i>
                                Reset Your Password
                            </h3>
                        </div>
                        <div class="card-body p-4">
                            {% for message in app.flashes('success') %}
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fi fi-sr-check me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}

                            {% for message in app.flashes('danger') %}
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fi fi-sr-cross me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}

                            <div class="text-center mb-4">
                                <p class="text-muted">Enter a strong new password and confirm it below.</p>
                            </div>

                            <form method="post" id="resetPasswordForm">
                                <div class="mb-3">
                                    <label for="password" class="form-label fw-semibold">
                                        <i class="fi fi-sr-lock me-2"></i>
                                        New Password
                                    </label>
                                    <input
                                            type="password"
                                            name="password"
                                            id="password"
                                            placeholder="Enter your new password"
                                            class="form-control"
                                            required minlength="6"
                                    />
                                    <div class="form-text text-muted">
                                        At least 6 characters long.
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label for="confirm_password" class="form-label fw-semibold">
                                        <i class="fi fi-sr-lock me-2"></i>
                                        Confirm New Password
                                    </label>
                                    <input
                                            type="password"
                                            name="confirm_password"
                                            id="confirm_password"
                                            placeholder="Confirm your new password"
                                            class="form-control"
                                            required minlength="6"
                                    />
                                </div>

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-lg text-white fw-bold"
                                            style="background-color: #ff6900; border: none;">
                                        <i class="fi fi-sr-check me-2"></i>
                                        Reset Password
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}