{% block content %}
<div class="card shadow-sm login-card">
    <div class="card-header">
        <h5 class="mb-0">{% trans %}Reset Password{% endtrans %}</h5>
    </div>
    <div class="card-body p-4">
        {% if success %}
            <div class="alert alert-success" role="alert">
                {{ message|trans }}
            </div>
            <div class="d-grid">
                <a href="{{ login_url }}" class="btn btn-secondary">{% trans %}Go to Login{% endtrans %}</a>
            </div>
        {% elseif show_form is defined and not show_form %}
            <div class="alert alert-danger" role="alert">
                {{ error|trans }}
            </div>
            <div class="d-grid">
                <a href="{{ base_url_prefix }}/password/forgot" class="btn btn-secondary">{% trans %}Request New Reset Link{% endtrans %}</a>
            </div>
        {% else %}
            {% if error %}
                <div class="alert alert-danger" role="alert">
                    {{ error|trans }}
                </div>
            {% endif %}
            
            {% if policy_errors is defined and policy_errors|length > 0 %}
                <div class="alert alert-danger" role="alert">
                    <h6 class="alert-heading">{% trans %}Password does not meet requirements{% endtrans %}:</h6>
                    <ul class="mb-0">
                        {% for error in policy_errors %}
                            <li>{{ error|trans }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
            
            <p>{% trans %}Enter your new password for{% endtrans %} <strong>{{ email }}</strong></p>
            
            <form class="needs-validation" method="post" action="{{ base_url_prefix }}/password/reset?token={{ token }}" novalidate>
                <input type="hidden" name="reset_password_token" value="{{ reset_password_token }}">
                
                <div class="mb-3">
                    <label for="password" class="form-label">{% trans %}New Password{% endtrans %}</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="password" name="password" required autofocus>
                        <button class="btn btn-outline-secondary" type="button" onclick="showPassword('password', 'eye-password')"><i class="bi bi-eye-fill text-secondary" id="eye-password"></i></button>
                        <div class="invalid-feedback">{% trans %}Please provide a password{% endtrans %}</div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="confirm_password" class="form-label">{% trans %}Confirm Password{% endtrans %}</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        <button class="btn btn-outline-secondary" type="button" onclick="showPassword('confirm_password', 'eye-confirm')"><i class="bi bi-eye-fill text-secondary" id="eye-confirm"></i></button>
                        <div class="invalid-feedback">{% trans %}Passwords do not match{% endtrans %}</div>
                    </div>
                </div>
                
                {% if password_policy.enable_password_rules %}
                    <div class="alert alert-info" role="alert">
                        <h6 class="alert-heading">{% trans %}Password Requirements{% endtrans %}:</h6>
                        <ul class="mb-0 small">
                            <li>{% trans %}Minimum length{% endtrans %}: {{ password_policy.min_length }} {% trans %}characters{% endtrans %}</li>
                            {% if password_policy.require_uppercase %}
                                <li>{% trans %}At least one uppercase letter{% endtrans %}</li>
                            {% endif %}
                            {% if password_policy.require_lowercase %}
                                <li>{% trans %}At least one lowercase letter{% endtrans %}</li>
                            {% endif %}
                            {% if password_policy.require_numbers %}
                                <li>{% trans %}At least one number{% endtrans %}</li>
                            {% endif %}
                            {% if password_policy.require_special %}
                                <li>{% trans %}At least one special character{% endtrans %} ({{ password_policy.special_characters }})</li>
                            {% endif %}
                        </ul>
                    </div>
                {% endif %}
                
                <div class="d-grid">
                    <button type="submit" class="btn btn-secondary">{% trans %}Reset Password{% endtrans %}</button>
                </div>
            </form>
            
            <div class="text-center mt-3">
                <a href="{{ base_url_prefix }}/login" class="text-decoration-none">{% trans %}Back to Login{% endtrans %}</a>
            </div>
        {% endif %}
    </div>
</div>

<script>
// Bootstrap form validation
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

// Password match validation
document.getElementById('confirm_password').addEventListener('input', function() {
    var password = document.getElementById('password').value;
    var confirmPassword = this.value;
    
    if (password !== confirmPassword) {
        this.setCustomValidity('{% trans %}Passwords do not match{% endtrans %}');
    } else {
        this.setCustomValidity('');
    }
});

document.getElementById('password').addEventListener('input', function() {
    var confirmPassword = document.getElementById('confirm_password');
    if (confirmPassword.value) {
        confirmPassword.dispatchEvent(new Event('input'));
    }
});
</script>

{% endblock %}