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

{% set active_page = "reset password" %}
{% block title %}New 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">
            New Password
        </h2>
        <p class="mt-2 text-center text-xs font-bold text-slate-500 uppercase tracking-widest">
            Enter your new credentials
        </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.reset_password', token=token)}}" 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">New Password</label>
                    <div class="relative group">
                        <i class="fa fa-key absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs group-focus-within:text-primary transition-colors"></i>
                        {{ form.password(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="••••••••") }}
                    </div>
                    {% if form.password.errors %}
                        <div class="px-1 pt-1">
                            {% for error in form.password.errors %}
                                <p class="text-[10px] font-bold text-red-500 uppercase tracking-widest">{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="space-y-1">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Confirm Password</label>
                    <div class="relative group">
                        <i class="fa fa-shield-check absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs group-focus-within:text-primary transition-colors"></i>
                        {{ form.confirm(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="••••••••") }}
                    </div>
                    {% if form.confirm.errors %}
                        <div class="px-1 pt-1">
                            {% for error in form.confirm.errors %}
                                <p class="text-[10px] font-bold text-red-500 uppercase tracking-widest">{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </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]">
                        Update Password
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}