{% extends "base.html" %}
{% block title %}Forgot Password — Ageri{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <div class="text-center mb-8">
      <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-teal mb-4">
        <span class="text-white font-bold text-2xl">A</span>
      </div>
      <h1 class="text-xl font-bold text-white">Forgot password?</h1>
      <p class="text-slate-400 text-sm mt-1">Recovery email delivery isn't active yet.</p>
    </div>

    <div class="bg-panel border border-border rounded-2xl p-8 space-y-5">

      {% if not recovery_email %}
      <div class="flex items-start gap-3 p-3 rounded-lg bg-slate-800/60 border border-slate-700/50">
        <svg class="w-4 h-4 text-slate-400 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
        </svg>
        <div>
          <p class="text-xs text-slate-300 font-medium">No recovery email set</p>
          <p class="text-xs text-slate-500 mt-0.5">You haven't set a recovery email. Log in and go to Settings → Security to add one.</p>
        </div>
      </div>
      {% endif %}

      <div class="border-t border-border pt-4">
        <p class="text-xs text-slate-400 font-medium mb-2">Reset manually</p>
        <p class="text-xs text-slate-500 leading-relaxed mb-2">Delete the password file on the machine running Ageri, then reload this page.</p>
        <p class="text-xs text-slate-500 mb-1">Linux / macOS</p>
        <pre class="p-3 rounded-lg bg-surface border border-border text-xs text-slate-300 font-mono overflow-x-auto">rm ~/ageri/.password_hash</pre>
        <p class="text-xs text-slate-500 mt-2 mb-1">Windows</p>
        <pre class="p-3 rounded-lg bg-surface border border-border text-xs text-slate-300 font-mono overflow-x-auto">del "%USERPROFILE%\ageri\.password_hash"</pre>
        <p class="text-xs text-slate-500 mt-3 leading-relaxed">
          Then go to <a href="/login" class="text-slate-300 hover:text-white underline">/login</a> — the setup wizard will let you set a new password.
        </p>
      </div>

    </div>

    <p class="text-center text-slate-600 text-xs mt-5">
      <a href="/login" class="text-slate-400 hover:text-white transition-colors">← Back to login</a>
    </p>
  </div>
</div>
{% endblock %}