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

{% block title %}{{ __('auth.reset_password_title', {'platformName': platformName}) }}{% endblock %}

{% block head %}
<style>
    .reset-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
    }
    .reset-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        max-width: 450px;
        width: 100%;
    }
    .reset-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px 20px;
        text-align: center;
    }
    .reset-header h3 {
        margin: 0;
        font-weight: 600;
    }
    .reset-body {
        padding: 40px 30px;
        background-color: #fff;
    }
    .form-floating {
        margin-bottom: 20px;
    }
    .form-control {
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        padding: 12px 15px;
        font-size: 16px;
        transition: all 0.3s;
    }
    .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 10px;
        padding: 12px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    .btn-link {
        color: #667eea;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s;
    }
    .btn-link:hover {
        color: #764ba2;
        text-decoration: underline;
    }
    .alert {
        border-radius: 10px;
        border: none;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="reset-container">
    <div class="row justify-content-center w-100">
        <div class="col-lg-5">
            <div class="card reset-card">
                <div class="reset-header">
                    <h3>{{ __('auth.reset_password_title', {'platformName': platformName}) }}</h3>
                </div>
                <div class="reset-body">
                    {% if error %}
                        <div class="alert alert-danger" role="alert">
                            {% if error == 'password_confirmation' %}
                                {{ __('auth.password_confirmation_error') }}
                            {% elseif error == 'weak_password' %}
                                {{ __('auth.weak_password_error') }}
                            {% elseif error == '4' %}
                                {{ __('auth.reset_error') }}
                            {% elseif error == '1' %}
                                {{ __('auth.reset_token_invalid') }}
                            {% elseif error == '2' %}
                                {{ __('auth.reset_token_expired') }}
                            {% elseif error == '3' %}
                                {{ __('auth.reset_email_invalid') }}
                            {% else %}
                                {{ __('auth.reset_error') }}
                            {% endif %}
                        </div>
                    {% endif %}
                    
                    <form method="POST" action="{{ url('reset-password') }}">
                        {{ csrf_field() }}
                        
                        <input type="hidden" name="token" value="{{ token }}">
                        <input type="hidden" name="email" value="{{ email }}">
                        
                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="email_display" value="{{ email }}" disabled>
                            <label for="email_display">{{ __('auth.email') }}</label>
                        </div>
                        
                        {% include 'components/password-field.twig' with {
                            id: 'password',
                            name: 'password',
                            label: __('auth.new_password'),
                            placeholder: __('auth.new_password_placeholder'),
                            required: true
                        } %}
                        
                        {% include 'components/password-field.twig' with {
                            id: 'password_confirmation',
                            name: 'password_confirmation',
                            label: __('auth.password_confirmation'),
                            placeholder: __('auth.password_confirmation_placeholder'),
                            required: true
                        } %}
                        
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary btn-lg" type="submit">
                                {{ __('auth.reset_password_button') }}
                            </button>
                            <a href="{{ url('login') }}" class="btn btn-link text-decoration-none text-center">
                                {{ __('auth.back_to_login') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Auto-focus on password field
    document.addEventListener('DOMContentLoaded', function() {
        const passwordField = document.getElementById('password');
        if (passwordField) {
            passwordField.focus();
        }
    });
</script>
{% endblock %}