{% extends "base.html" %}
{% block title %}Восстановление пароля{% endblock %}
{% block content %}
<div class="max-w-md mx-auto bg-white dark:bg-slate-800/90 rounded-xl shadow border border-slate-200 dark:border-slate-600 p-8 space-y-8" x-data="resetForm()">
  <div>
    <h1 class="text-xl font-bold mb-4 text-slate-900 dark:text-white">Запрос ссылки</h1>
    <form @submit.prevent="requestReset" class="space-y-3">
      <input type="email" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Email" x-model="email" required>
      <button type="submit" class="w-full bg-slate-800 dark:bg-slate-200 text-white dark:text-slate-900 py-2 rounded-lg">Отправить</button>
    </form>
    <p class="text-sm text-slate-500 dark:text-slate-400 mt-2" x-show="msg1" x-text="msg1"></p>
  </div>
  <div>
    <h1 class="text-xl font-bold mb-4 text-slate-900 dark:text-white">Новый пароль</h1>
    <form @submit.prevent="confirm" class="space-y-3">
      <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="uid из ссылки" x-model="uid">
      <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="token из ссылки" x-model="token">
      <input type="password" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Новый пароль" x-model="new_password" minlength="8">
      <button type="submit" class="w-full bg-sky-600 text-white py-2 rounded-lg">Сохранить пароль</button>
    </form>
    <p class="text-sm text-slate-500 dark:text-slate-400 mt-2" x-show="msg2" x-text="msg2"></p>
  </div>
  <p class="text-sm"><a href="/login/" class="text-sky-700 dark:text-sky-400">Назад ко входу</a></p>
</div>
<script>
function resetForm() {
  return {
    email: '', uid: '', token: '', new_password: '', msg1: '', msg2: '',
    init() {
      const u = new URLSearchParams(location.search);
      if (u.get('uid')) this.uid = u.get('uid');
      if (u.get('token')) this.token = u.get('token');
    },
    async requestReset() {
      this.msg1 = '';
      const r = await fetch('/api/auth/password-reset/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: this.email })
      });
      const d = await r.json();
      this.msg1 = d.detail || 'Готово';
    },
    async confirm() {
      this.msg2 = '';
      const r = await fetch('/api/auth/password-reset/confirm/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ uid: this.uid, token: this.token, new_password: this.new_password })
      });
      const d = await r.json();
      this.msg2 = d.detail || JSON.stringify(d);
      if (r.ok) setTimeout(() => location.href = '/login/', 800);
    }
  };
}
</script>
{% endblock %}