{% extends "static/login_base.html" %}

{% block title %}enviPath - Set New Password{% endblock %}

{% block content %}
  <!-- Title -->
  <div class="mb-8">
    <h2 class="mb-2 text-3xl font-bold">Set New Password</h2>
    <p class="text-base-content/70">Please enter your new password below.</p>
  </div>

  <!-- Messages -->
  {% if validlink %}
    <!-- Password Requirements Info -->
    <div class="alert alert-info mb-4 text-sm">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="h-6 w-6 shrink-0 stroke-current"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>
      <div>
        <div class="font-bold">Password Requirements</div>
        <div class="mt-1 text-xs">
          • 8 to 30 characters<br />
          • Upper and lower case letters<br />
          • Digits and special characters (_, -, +)
        </div>
      </div>
    </div>

    <!-- Reset Password Form -->
    <form method="post" class="space-y-4">
      {% csrf_token %}

      <div class="form-control">
        <label class="label" for="id_new_password1">
          <span class="label-text">New Password</span>
        </label>
        <input
          type="password"
          id="id_new_password1"
          name="new_password1"
          placeholder="••••••••"
          class="input input-bordered w-full"
          required
          autocomplete="new-password"
        />
        {% if form.new_password1.help_text %}
          <label class="label">
            <span class="label-text-alt text-base-content/60"
              >{{ form.new_password1.help_text }}</span
            >
          </label>
        {% endif %}
        {% if form.new_password1.errors %}
          <label class="label">
            <span class="label-text-alt text-error"
              >{{ form.new_password1.errors|join:", " }}</span
            >
          </label>
        {% endif %}
      </div>

      <div class="form-control">
        <label class="label" for="id_new_password2">
          <span class="label-text">Confirm New Password</span>
        </label>
        <input
          type="password"
          id="id_new_password2"
          name="new_password2"
          placeholder="••••••••"
          class="input input-bordered w-full"
          required
          autocomplete="new-password"
        />
        {% if form.new_password2.help_text %}
          <label class="label">
            <span class="label-text-alt text-base-content/60"
              >{{ form.new_password2.help_text }}</span
            >
          </label>
        {% endif %}
        {% if form.new_password2.errors %}
          <label class="label">
            <span class="label-text-alt text-error"
              >{{ form.new_password2.errors|join:", " }}</span
            >
          </label>
        {% endif %}
      </div>

      <button type="submit" class="btn btn-primary w-full">
        Reset Password
      </button>
    </form>
  {% else %}
    <!-- Invalid Link -->
    <div class="alert alert-error mb-6">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 shrink-0 stroke-current"
        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>
      <div>
        <div class="font-bold">Invalid Reset Link</div>
        <div class="text-sm">
          This password reset link is invalid or has expired.
        </div>
      </div>
    </div>

    <div class="space-y-4">
      <a href="{% url 'password_reset' %}" class="btn btn-primary w-full"
        >Request New Reset Link</a
      >
    </div>
  {% endif %}

  <!-- Back to Sign In -->
  <div class="text-base-content/70 mt-6 text-center text-sm">
    <p>
      Remember your password?
      <a href="{% url 'login' %}" class="link link-primary">Sign in</a>
    </p>
  </div>
{% endblock %}