{% extends "base.html" %}
{% block title %}{{ _("Forgot Password") }} - ModuleDesk{% endblock %}
{% block public_content %}
<div class="min-h-screen bg-gradient-to-br from-brand-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-gray-900/50 p-8 w-full max-w-sm">
    <div class="text-center mb-8">
      <img src="{{ url_for('static', filename='logo.svg') }}" alt="ModuleDesk" class="h-12 w-12 mx-auto">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">{{ _("Reset password") }}</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Enter your email and we'll send a reset link{% endtrans %}</p>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% for category, message in messages %}
        <div class="mb-6 px-4 py-3 rounded-lg text-sm font-medium
          {% if category == 'success' %}bg-green-50 dark:bg-green-500/10 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-500/30
          {% else %}bg-red-50 dark:bg-red-500/10 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-500/30{% endif %}">
          {{ message }}
        </div>
      {% endfor %}
    {% endwith %}

    <form method="post" action="{{ url_for('onboarding.forgot_password') }}" class="space-y-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("Email address") }}</label>
        <input type="email" id="email" name="email" required autofocus autocomplete="email"
               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-shadow">
      </div>
      <button type="submit"
              class="w-full bg-brand-600 text-white py-2.5 px-4 rounded-lg text-sm font-semibold hover:bg-brand-700 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition-colors">
        {{ _("Send reset link") }}
      </button>
    </form>

    <p class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
      <a href="{{ url_for('login') }}" class="text-brand-600 dark:text-brand-400 hover:underline">{{ _("Back to login") }}</a>
    </p>
  </div>
</div>
{% endblock %}