{% extends "layouts/auth.html" %}
{% block title %}Set new password — IILMP{% endblock %}
{% block content %}

{% if validlink %}

<div class="mb-7">
  <div class="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-ruforum-primary/10 text-ruforum-primary">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>
    </svg>
  </div>
  <h1 class="font-display text-xl font-bold text-ruforum-text">Set new password</h1>
  <p class="mt-1 text-xs leading-relaxed text-ruforum-text-muted">
    Choose a strong password you don't use anywhere else.
  </p>
</div>

<form method="post" class="space-y-4" novalidate>
  {% csrf_token %}
  {% if form.non_field_errors %}
    <div class="flex items-start gap-2.5 rounded-lg border border-red-200 bg-red-50 px-3.5 py-3 text-xs text-red-700" role="alert">
      <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      <span>{{ form.non_field_errors }}</span>
    </div>
  {% endif %}
  {% for field in form %}
    {% include "components/forms/field.html" with field=field %}
  {% endfor %}
  <div class="pt-1">
    <button type="submit" class="btn-primary w-full justify-center">
      Save password
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
      </svg>
    </button>
  </div>
</form>

{% else %}

<div class="text-center">
  <div class="mx-auto mb-5 inline-flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-600">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
    </svg>
  </div>
  <h1 class="font-display text-xl font-bold text-ruforum-text">Reset link invalid</h1>
  <p class="mt-2 text-sm leading-relaxed text-ruforum-text-muted">
    This password reset link is invalid or has already been used. Reset links expire after a short time for your security.
  </p>
  <div class="mt-6">
    <a href="{% url 'accounts:password_reset' %}" class="btn-primary w-full justify-center">
      Request a new link
    </a>
  </div>
  <p class="mt-5 border-t border-ruforum-border pt-5 text-xs">
    <a href="{% url 'accounts:login' %}" class="font-medium text-ruforum-primary transition-colors hover:text-ruforum-primary-hover focus:outline-none focus:ring-1 focus:ring-ruforum-primary rounded">
      ← Back to sign in
    </a>
  </p>
</div>

{% endif %}

{% endblock %}