{% extends "layout.html" %}

{% block title %}Reset Password - Trade Signals{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="auth-container fade-in-on-scroll">
            <div class="auth-header">
                <div class="auth-icon"><i data-lucide="lock"></i></div>
                <h1>Reset Password</h1>
                <p class="auth-subtitle">Enter your new password below.</p>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="flash-messages">
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}

            <form method="POST" action="{{ url_for('auth.reset_password', token=token) }}" class="auth-form" id="resetPasswordForm">
                <div class="form-group">
                    <label for="password">New Password *</label>
                    <div class="input-with-icon">
                        <i data-lucide="lock" class="input-icon"></i>
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            required
                            placeholder="Enter your new password"
                            autocomplete="new-password"
                            minlength="8"
                        >
                        <button type="button" class="password-toggle" onclick="togglePassword('password')" aria-label="Toggle password visibility">
                            <i data-lucide="eye" id="password-eye"></i>
                        </button>
                    </div>
                    <small class="form-text">Password must be at least 8 characters long and contain letters and numbers.</small>
                </div>

                <div class="form-group">
                    <label for="retype_password">Confirm New Password *</label>
                    <div class="input-with-icon">
                        <i data-lucide="lock" class="input-icon"></i>
                        <input 
                            type="password" 
                            id="retype_password" 
                            name="retype_password" 
                            required
                            placeholder="Confirm your new password"
                            autocomplete="new-password"
                            minlength="8"
                        >
                        <button type="button" class="password-toggle" onclick="togglePassword('retype_password')" aria-label="Toggle password visibility">
                            <i data-lucide="eye" id="retype_password-eye"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-block">
                    <i data-lucide="check" class="inline-icon"></i>
                    Reset Password
                </button>
            </form>

            <div class="auth-footer">
                <p>Remember your password? <a href="{{ url_for('auth.login') }}">Login here</a></p>
                <p>Need a new reset link? <a href="{{ url_for('auth.forgot_password') }}">Request one</a></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-eye');
    if (field.type === 'password') {
        field.type = 'text';
        if (icon) icon.setAttribute('data-lucide', 'eye-off');
    } else {
        field.type = 'password';
        if (icon) icon.setAttribute('data-lucide', 'eye');
    }
    if (typeof lucide !== 'undefined' && lucide.createIcons) {
        lucide.createIcons();
    }
}
</script>
{% endblock %}