{% extends "shopyo_base/main_base.html" %}

{% set active_page = "forgot password" %}
{% block title %}Forgot Password{% endblock %}

{% block content %}
<div class="min-h-[80vh] flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
        <img src="/static/shopyo.svg" class="mx-auto h-20 w-auto" alt="Shopyo">
        <h2 class="mt-6 text-center text-3xl font-black text-slate-900 dark:text-white tracking-tight uppercase">
            Reset Password
        </h2>
        <p class="mt-2 text-center text-xs font-bold text-slate-500 uppercase tracking-widest">
            We'll send a link to your email
        </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white dark:bg-slate-900 py-10 px-6 shadow-2xl rounded-[2.5rem] border border-slate-200 dark:border-slate-800 sm:px-10">
            <form action="{{url_for('shopyo_auth.forgot_password')}}" method="POST" class="space-y-6">
                <div class="space-y-1">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Email Address</label>
                    <div class="relative group">
                        <i class="fa fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs group-focus-within:text-primary transition-colors"></i>
                        {{ form.email(class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all outline-none", placeholder="Email") }}
                    </div>
                </div>

                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

                <div class="pt-2">
                    <button type="submit" class="w-full bg-primary text-white font-black py-4 px-6 rounded-2xl hover:bg-primary-dark transition-all shadow-xl shadow-primary/20 active:scale-[0.98] text-xs uppercase tracking-[0.2em]">
                        Send Reset Link
                    </button>
                </div>
            </form>

            <div class="mt-8 pt-8 border-t border-slate-100 dark:border-slate-800 text-center">
                <a href="{{ url_for('shopyo_auth.login') }}" class="text-[10px] font-bold text-slate-400 hover:text-primary transition-colors uppercase tracking-widest">
                    <i class="fas fa-arrow-left mr-2"></i> Back to sign in
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}