{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}{% if form.email.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/forms.css" %}">{% endblock %}
{% block breadcrumbs %}
<ol class="breadcrumbs">
<li><a href="{% url 'admin:index' %}">{% translate 'Home' %}</a></li>
<li aria-current="page">{% translate 'Password reset' %}</li>
</ol>
{% endblock %}

{% block content %}
<div id="content-main" class="max-w-4xl mx-auto py-10">
  <div class="apple-glass p-10 rounded-[40px] border border-white/20 shadow-2xl overflow-hidden">
    <div class="flex items-center gap-6 mb-10 pb-6 border-b border-black/5 dark:border-white/5">
        <div class="w-16 h-16 bg-purple-600 rounded-2xl flex items-center justify-center shadow-2xl shadow-purple-500/30">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
        </div>
        <div>
            <h1 class="text-3xl font-black tracking-tight text-gray-900 dark:text-white">{% translate 'Password Reset' %}</h1>
            <p class="text-gray-500 dark:text-gray-400 font-medium text-sm">{% translate 'We’ll email instructions for setting a new one.' %}</p>
        </div>
    </div>

    <form method="post" class="flex flex-col gap-8">{% csrf_token %}
        <p class="text-gray-600 dark:text-gray-400 text-sm font-medium">{% translate 'Forgotten your password? Enter your email address below.' %}</p>

        <div class="flex flex-col gap-2">
            {{ form.email.errors }}
            <label class="text-xs font-black uppercase tracking-widest text-gray-400 ml-1" for="id_email">{% translate 'Email address:' %}</label>
            <div class="custom-input-wrapper">
                {{ form.email }}
            </div>
        </div>

        <div class="flex justify-end pt-6 border-t border-black/5 dark:border-white/5">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-4 rounded-2xl font-bold shadow-xl shadow-blue-500/30 active:scale-95 transition-all text-sm">
                {% translate 'Reset my password' %}
            </button>
        </div>
    </form>
  </div>
</div>

<style>
    .custom-input-wrapper input {
        width: 100% !important;
        background: rgba(0,0,0,0.05) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        border-radius: 16px !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        outline: none !important;
        transition: all 0.2s !important;
    }
    [data-theme="dark"] .custom-input-wrapper input {
        background: rgba(255,255,255,0.05) !important;
        border-color: rgba(255,255,255,0.05) !important;
        color: white !important;
    }
    .custom-input-wrapper input:focus {
        background: white !important;
        border-color: #007aff !important;
        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1) !important;
    }
    [data-theme="dark"] .custom-input-wrapper input:focus {
        background: #1c1c1e !important;
    }
</style>
{% endblock %}