{% extends 'base.html' %}
{% load static %}

{% block content %}
<section class="hero-bw text-center">
    <div class="container">
        <div class="hero-content text-start" style="max-width: 450px; width: 100%;">
            <h1 class="h2 mb-4">SET_NEW_PASSWORD</h1>
            
            {% if validlink %}
                <form method="post">
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="mb-3">
                            <label for="{{ field.id_for_label }}" class="form-label font-mono small">{{ field.label|upper }}</label>
                            <input type="{{ field.field.widget.input_type|default:'password' }}" 
                                   name="{{ field.name }}" 
                                   id="{{ field.id_for_label }}" 
                                   class="form-control font-mono rounded-0 border-2" 
                                   placeholder="{{ field.label|upper }}"
                                   required>
                            {% if field.help_text %}
                                <div class="form-text font-mono small opacity-50">{{ field.help_text|safe }}</div>
                            {% endif %}
                            {% for error in field.errors %}
                                <div class="text-danger font-mono small mt-1">{{ error }}</div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                    <div class="d-grid mt-4">
                        <button type="submit" class="btn btn-bw w-100">UPDATE_PASSWORD</button>
                    </div>
                </form>
            {% else %}
                <div class="text-center">
                    <p class="font-mono text-danger mb-4">INVALID_OR_EXPIRED_LINK.</p>
                    <div class="d-grid">
                        <a href="{% url 'password_reset' %}" class="btn btn-bw">REQUEST_NEW_LINK</a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}