{% extends "layouts/base.html" %}

{% block title %}Reset Password - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/form.css"> {# Reusing form.css for styling #}
{% endblock %}

{% block content %}
<div class="form-page-container">
    <h1>Set Your New Password</h1>
    <p class="subtitle">Please enter and confirm your new password below.</p>

    <section class="form-container">
        <h2>Reset Password</h2>
        {% if error %}
            <p class="error">{{ error }}</p>
        {% endif %}
        <form action="/reset_password/{{ token }}" method="post">
            <div class="form-group">
                <label for="password">New Password</label>
                <input type="password" id="password" name="password" required>
                {% if errors.password %}
                    <p class="error">{{ errors.password }}</p>
                {% endif %}
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirm New Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
                {% if errors.confirm_password %}
                    <p class="error">{{ errors.confirm_password }}</p>
                {% endif %}
            </div>
            <button type="submit" class="btn-primary">Reset Password</button>
        </form>
    </section>
</div>
{% endblock %}