{% extends "shopyo_base/module_base.html" %}
{% set active_page = "admin" %}

{% block pagehead %}
{{ super() }}
<title>Edit User</title>
{% endblock %}

{% block sidebar %}
    {% include 'shopyo_appadmin/blocks/sidebar.html' %}
{% endblock %}

{% block module_content %}
<div class="max-w-2xl mx-auto">
    <div class="card">
        <div class="card-body">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center font-black text-lg border border-primary/20">
                        {{ user.email[0]|upper }}
                    </div>
                    <div>
                        <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Edit Profile</h3>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{{ user.email }}</p>
                    </div>
                </div>
                <a href="{{ url_for('shopyo_appadmin.user_list') }}"
                   class="btn btn-dark !py-2 !px-4 flex items-center gap-2 group">
                    <i class="fas fa-arrow-left text-[10px] group-hover:-translate-x-1 transition-transform"></i>
                    <span>Back to List</span>
                </a>
            </div>

            <form action="{{ url_for('shopyo_appadmin.admin_update') }}" method="post" class="space-y-6">                <input required name="id" id="user_id" type="hidden" value="{{ user.id }}">

                <div class="space-y-1">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest 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>
                        <input type="email" name="email" value="{{ user.email }}" required autocomplete="off"
                               class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
                    </div>
                </div>

                <div class="space-y-1">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">New Password (leave blank to keep current)</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>
                        <input type="password" name="password" placeholder="••••••••" autocomplete="off"
                               class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 pl-11 pr-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">First Name</label>
                        <input type="text" name="first_name" value="{{ user.first_name }}" autocomplete="off"
                               class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
                    </div>
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Last Name</label>
                        <input type="text" name="last_name" value="{{ user.last_name }}" autocomplete="off"
                               class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-3 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none">
                    </div>
                </div>

                <div class="flex items-center gap-2 py-2">
                    <input type="checkbox" name="is_admin" id="is_admin" class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20" {{'checked' if user.is_admin}}>
                    <label for="is_admin" class="text-xs font-bold text-slate-700 dark:text-slate-300">Administrator Privileges</label>
                </div>

                <div class="space-y-3">
                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] px-1">Assigned Roles</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        {% for role in roles %}
                        <label class="relative flex items-center p-4 rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 cursor-pointer hover:border-primary/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all group">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="role_{{role.id}}"
                                       class="w-4 h-4 rounded border-slate-300 dark:border-slate-600 text-primary focus:ring-primary/20 bg-transparent"
                                       {% if role.name in user_roles %} checked {% endif %}>
                            </div>
                            <div class="ml-3">
                                <span class="text-xs font-bold text-slate-700 dark:text-slate-200 group-hover:text-primary transition-colors">{{role.name}}</span>
                            </div>
                        </label>
                        {% else %}
                        <div class="col-span-full p-4 rounded-2xl border border-dashed border-slate-200 dark:border-slate-700 text-center">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">No roles defined</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>

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

                <div class="pt-6">
                    <button type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 active:scale-[0.98]">
                        Save Changes
                    </button>
                    <a href="{{ url_for('shopyo_appadmin.user_list') }}" class="block text-center mt-4 text-xs font-bold text-slate-400 hover:text-primary transition-colors">
                        Cancel and return
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}