{% extends "base.html" %}

{% block title %}Reset Password{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-base-200 py-12 px-4">
  <div class="card w-full max-w-md bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title text-2xl font-bold text-center w-full mb-2">Reset Password</h2>
      <p class="text-center text-base-content/70 mb-6">
        Enter your new password below.
      </p>

      <!-- Success message -->
      {% if message %}
      <div class="alert alert-success mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{ message }}</span>
      </div>
      <div class="text-center mt-4">
        <a href="{{ login_url }}" class="btn btn-primary">Go to Login</a>
      </div>
      {% else %}

      <!-- Error message -->
      {% if error %}
      <div class="alert alert-error mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{ error }}</span>
      </div>
      {% endif %}

      <!-- Form -->
      <form method="POST" action="/reset-password/{{ token }}" class="space-y-4">
        <div class="form-control">
          <label class="label" for="password">
            <span class="label-text">New Password</span>
          </label>
          <input
            type="password"
            name="password"
            id="password"
            class="input input-bordered w-full"
            placeholder="••••••••"
            required
            minlength="8"
            autocomplete="new-password"
          />
          <label class="label">
            <span class="label-text-alt">At least 8 characters</span>
          </label>
        </div>

        <div class="form-control">
          <label class="label" for="password_confirm">
            <span class="label-text">Confirm New Password</span>
          </label>
          <input
            type="password"
            name="password_confirm"
            id="password_confirm"
            class="input input-bordered w-full"
            placeholder="••••••••"
            required
            autocomplete="new-password"
          />
        </div>

        <button type="submit" class="btn btn-primary w-full">Reset Password</button>
      </form>
      {% endif %}

      <!-- Back to login -->
      <div class="text-center mt-6">
        <a href="{{ login_url }}" class="link link-hover text-sm">
          Back to login
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}