{% extends "base.html" %}

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

{% block header_css %}
<style>
.login-container {
    max-width: 450px;
    margin: 80px auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #444;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.btn {
    background: #2196F3;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.btn:hover {
    background: #1976D2;
}

.alert {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.alert.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.back-link {
    text-align: center;
    margin-top: 20px;
}

.back-link a {
    color: #666;
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}

.password-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <h2 data-i18n="reset_page.title">Set New Password</h2>
    
    {% if message %}
    <div class="alert {{ message_type }}">
        {{ message }}
    </div>
    {% endif %}
    
    {% if valid_token and not success %}
    <p style="text-align: center; color: #666; margin-bottom: 25px;">
        Please enter your new password below.
    </p>
    
    <form method="POST">
        <div class="form-group">
            <label for="password" data-i18n="reset_page.password">New Password</label>
            <input type="password" id="password" name="password" required minlength="8">
            <div class="password-hint">Must be at least 8 characters long</div>
        </div>
        
        <div class="form-group">
            <label for="password_confirm" data-i18n="reset_page.confirm">Confirm Password</label>
            <input type="password" id="password_confirm" name="password_confirm" required>
        </div>
        
        <button type="submit" class="btn" data-i18n="reset_page.submit">Reset Password</button>
    </form>
    {% elif success %}
    <p style="text-align: center; color: #155724; line-height: 1.6;">
        Your password has been successfully reset.
        <br><br>
        You can now login with your new password.
    </p>
    <div style="text-align: center; margin-top: 25px;">
        <a href="{{ url_for(request, '/dashboard/login') }}" class="btn" style="display: inline-block; text-decoration: none; width: auto; padding: 10px 25px;">
            Go to Login
        </a>
    </div>
    {% else %}
    <p style="text-align: center; color: #721c24; line-height: 1.6;">
        This password reset link is invalid or has expired.
        <br><br>
        Please request a new password reset link.
    </p>
    <div style="text-align: center; margin-top: 25px;">
        <a href="{{ url_for(request, '/dashboard/forgot-password') }}" class="btn" style="display: inline-block; text-decoration: none; width: auto; padding: 10px 25px;">
            Request New Reset Link
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}
