{% extends "base.html" %}

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

{% block body_attrs %} class="centered-page"{% endblock %}

{% block content %}
    <h1 class="brand-h1">Makenot<span class="dot">.</span>work</h1>
    <div class="login-container">
      <div id="form-feedback">
        {% if let Some(msg) = error %}<div class="alert alert-error">{{ msg }}</div>{% endif %}
      </div>

      {% if valid %}
      <form class="login-form"
            hx-post="/reset-password"
            hx-target="#form-feedback"
            hx-swap="innerHTML"
            hx-indicator="#submit-spinner">
        <h2 class="subtitle-h2">Set New Password</h2>
        <p class="form-description">Enter your new password below.</p>

        <input type="hidden" name="user" value="{{ user_id }}" />
        <input type="hidden" name="expires" value="{{ expires }}" />
        <input type="hidden" name="sig" value="{{ sig }}" />

        <div class="form-group">
          <label for="password">New Password</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="--------"
            required
            minlength="8"
            autofocus
          />
        </div>

        <div class="form-group">
          <label for="password_confirm">Confirm Password</label>
          <input
            type="password"
            id="password_confirm"
            name="password_confirm"
            placeholder="--------"
            required
            minlength="8"
          />
        </div>

        <button type="submit" class="btn-primary">
          Set Password
          <span id="submit-spinner" class="htmx-indicator"> ...</span>
        </button>
      </form>
      {% else %}
      <div class="login-form">
        <h2 class="subtitle-h2">Link Expired</h2>
        <p class="form-description">This password reset link has expired or is invalid. Please request a new one.</p>
        <a href="/forgot-password" class="btn btn-primary">Request New Link</a>
      </div>
      {% endif %}

      <div class="foot-link">
        <a href="/login">Back to login<span class="dot">.</span></a>
      </div>
    </div>
{% endblock %}