{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Set New Password" %}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-background">
    <c-card class='w-[400px]'>
        <c-card.header>
            <c-card.title>
                {% if token_fail %}
                    {% trans "Invalid Reset Link" %}
                {% else %}
                    {% trans "Set New Password" %}
                {% endif %}
            </c-card.title>
            <c-card.description>
                {% if token_fail %}
                    {% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}
                {% else %}
                    {% trans "Please enter your new password twice so we can verify you typed it in correctly." %}
                {% endif %}
            </c-card.description>
        </c-card.header>

        {% if not token_fail %}
            <form method="POST">
                {% csrf_token %}
                <c-card.content class='space-y-4'>
                    {% if form.non_field_errors %}
                        <c-alert variant="destructive">
                            <c-alert.description>
                                {{ form.non_field_errors }}
                            </c-alert.description>
                        </c-alert>
                    {% endif %}

                    <div class='space-y-2'>
                        <c-label for="{{ form.password1.id_for_label }}">
                            {{ form.password1.label }}
                        </c-label>
                        <c-input
                            type="password"
                            name="{{ form.password1.name }}"
                            id="{{ form.password1.id_for_label }}"
                            placeholder="Enter new password"
                            {{ form.password1.field.required|yesno:'required,' }}
                            class="{{ form.password1.errors|yesno:'border-destructive,' }}"
                        />
                        {% if form.password1.errors %}
                            <div class="text-destructive text-xs">
                                {{ form.password1.errors }}
                            </div>
                        {% endif %}
                    </div>

                    <div class='space-y-2'>
                        <c-label for="{{ form.password2.id_for_label }}">
                            {{ form.password2.label }}
                        </c-label>
                        <c-input
                            type="password"
                            name="{{ form.password2.name }}"
                            id="{{ form.password2.id_for_label }}"
                            placeholder="Confirm new password"
                            {{ form.password2.field.required|yesno:'required,' }}
                            class="{{ form.password2.errors|yesno:'border-destructive,' }}"
                        />
                        {% if form.password2.errors %}
                            <div class="text-destructive text-xs">
                                {{ form.password2.errors }}
                            </div>
                        {% endif %}
                    </div>
                </c-card.content>

                <c-card.footer class='flex flex-col space-y-3'>
                    <c-button type="submit" class="w-full">
                        {% trans "Change Password" %}
                    </c-button>
                </c-card.footer>
            </form>
        {% else %}
            <c-card.footer class='flex flex-col space-y-3 pt-6'>
                <c-button onclick="window.location.href='{% url 'account_reset_password' %}'" class="w-full">
                    {% trans "Request New Reset Link" %}
                </c-button>

                <div class="text-center text-sm text-muted-foreground">
                    <a href="{% url 'account_login' %}" class="text-primary hover:underline">
                        {% trans "Back to Sign In" %}
                    </a>
                </div>
            </c-card.footer>
        {% endif %}
    </c-card>
</div>
{% endblock %}