{% extends 'base.html' %}

{% block title %}Set New Password - House Expense{% endblock %}

{% block extra_css %}
<style>
    .auth-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        width: 100%;
        height: 100vh;
        margin-top: -40px; /* Offset the container padding to truly center */
    }

    .auth-card {
        width: 100%;
        max-width: 400px;
        padding: 40px;
        text-align: center;
        background: var(--bg-card);
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        animation: fadeIn 0.6s ease-out;
    }

    .auth-header {
        margin-bottom: 30px;
    }

    .auth-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--primary-color);
    }

    .auth-subtitle {
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    .auth-form {
        text-align: left;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-wrapper">
    <div class="auth-card glass-panel">
        <div class="auth-header">
            <h1 class="auth-title">Set New Password</h1>
            {% if validlink %}
                <p class="auth-subtitle">Please enter your new password twice so we can verify you typed it in correctly.</p>
            {% else %}
                <p class="auth-subtitle">Password reset link is invalid.</p>
            {% endif %}
        </div>

        {% if validlink %}
            <form method="post" class="auth-form">
                {% csrf_token %}
                
                {% if form.errors %}
                    <div class="alert alert-error" style="margin-bottom: 15px;">
                        Please correct the errors below.
                    </div>
                {% endif %}

                {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                        {{ field }}
                        {% if field.help_text %}
                            <small style="color: var(--text-muted); font-size: 0.8rem; display: block; margin-top: 5px;">{{ field.help_text|safe }}</small>
                        {% endif %}
                        {% for error in field.errors %}
                            <small style="color: red; font-size: 0.8rem; display: block; margin-top: 5px;">{{ error }}</small>
                        {% endfor %}
                    </div>
                {% endfor %}

                <button type="submit" class="btn-primary" style="width: 100%; margin-top: 10px; padding: 10px; font-weight: 500;">Change Password</button>
            </form>
        {% else %}
            <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px;">
                The password reset link was invalid, possibly because it has already been used. Please request a new password reset.
            </p>
            <a href="{% url 'password_reset' %}" class="btn-primary" style="display: block; width: 100%; padding: 10px; font-weight: 500; text-decoration: none;">Request new reset link</a>
        {% endif %}
    </div>
</div>

<script>
    // Add form-control class to the auto-generated django form inputs
    document.addEventListener("DOMContentLoaded", function() {
        const inputs = document.querySelectorAll('.auth-form input');
        inputs.forEach(input => {
            if(input.type !== 'hidden') {
                input.classList.add('form-control');
            }
        });
    });
</script>
{% endblock %}