{% extends "base.html" %}
{% block title %}{{ _("Reset 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">{{ _("Choose a new password") }}</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ _("Must be at least 8 characters") }}</p>
    </div>

    {% if error %}
    <div class="mb-6 bg-red-50 dark:bg-red-500/10 border-l-4 border-red-400 dark:border-red-500 p-3 rounded-r" role="alert">
      <p class="text-sm text-red-700 dark:text-red-300">{{ error }}</p>
    </div>
    {% endif %}

    <form method="post" action="{{ url_for('onboarding.reset_password', token=token) }}" class="space-y-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("New password") }}</label>
        <input type="password" id="password" name="password" required autofocus autocomplete="new-password" minlength="8"
               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 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-shadow">
      </div>
      <div>
        <label for="confirm_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("Confirm password") }}</label>
        <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password" minlength="8"
               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 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">
        {{ _("Set new password") }}
      </button>
    </form>
  </div>
</div>
{% endblock %}