{% 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: var(--color-link);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

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

.btn:hover {
    background: var(--color-link-hover);
}

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

.alert.success {
    background: var(--alert-success-bg);
    color: var(--alert-success-fg);
    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;" data-i18n="reset_page.intro">
        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" data-i18n="reset_page.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: var(--alert-success-fg); line-height: 1.6;" data-i18n="reset_page.success">
        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;" data-i18n="reset_page.go_to_login">
            Go to Login
        </a>
    </div>
    {% else %}
    <p style="text-align: center; color: #721c24; line-height: 1.6;" data-i18n="reset_page.invalid_token">
        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;" data-i18n="reset_page.request_new">
            Request New Reset Link
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}