{% extends "base.html" %}

{% block title %}Reset 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"></div>

      <form class="login-form"
            hx-post="/forgot-password"
            hx-target="#form-feedback"
            hx-swap="innerHTML"
            hx-indicator="#submit-spinner">
        <h2 class="subtitle-h2">Reset Password</h2>
        <p class="form-description">Enter your email address and we'll send you a link to reset your password.</p>

        <div class="form-group">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="you@example.com"
            required
            autofocus
          />
        </div>

        <button type="submit" class="btn-primary">
          Send Reset Link
          <span id="submit-spinner" class="htmx-indicator"> ...</span>
        </button>

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