{% extends 'crochet/base.html' %}
{% load i18n %}

{% block title %}{% trans 'Elegir nueva contraseña' %}{% endblock %}

{% block extra_css %}
  {% include 'crochet/_platform_assets.html' %}
{% endblock %}

{% block content %}
  <main class="flex justify-center px-4 py-12">
    <div class="card w-full max-w-sm bg-base-100 shadow-xl border border-base-300">
      <div class="card-body">
        {% if validlink %}
          <h1 class="card-title">{% trans 'Elige una contraseña nueva' %}</h1>
          <form method="post" class="flex flex-col gap-3">
            {% csrf_token %}
            {% for field in form %}
              <label class="flex flex-col gap-1">
                <span class="text-sm">{{ field.label }}</span>
                {{ field }}
                {% for error in field.errors %}
                  <span class="text-error text-xs">{{ error }}</span>
                {% endfor %}
                {% if field.help_text %}
                  <span class="text-xs text-base-content/60">{{ field.help_text }}</span>
                {% endif %}
              </label>
            {% endfor %}
            <button type="submit" class="btn btn-primary mt-2">{% trans 'Cambiar contraseña' %}</button>
          </form>
        {% else %}
          <h1 class="card-title">{% trans 'Enlace no válido' %}</h1>
          <p class="text-sm text-base-content/70">
            {% trans 'El enlace para restablecer la contraseña no es válido, puede que ya se haya usado. Solicita uno nuevo.' %}
          </p>
          <p class="text-sm text-center mt-2">
            <a href="{% url 'crochet:password_reset' %}" class="link link-primary">{% trans 'Solicitar un enlace nuevo' %}</a>
          </p>
        {% endif %}
      </div>
    </div>
  </main>
{% endblock %}