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

{% block pagehead %}
{{ super() }}
<title>Roles Management</title>
{% endblock %}

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

{% block module_content %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Add Role -->
    <div>
        <div class="card h-full">
            <div class="card-body">
                <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight mb-8 text-center md:text-left">Add New Role</h3>

                <form class="space-y-4" method="POST" action='{{url_for(module_name+".roles_add")}}'>
                    <input name="csrf_token" value="{{csrf_token()}}" type="hidden">
                    <div class="space-y-1">
                        <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Role Name</label>
                        <input type="text" name="name" placeholder="e.g. Moderator" required
                               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="pt-2">
                        <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]">
                            Create Role
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Existing Roles -->
    <div>
        <div class="card h-full">
            <div class="card-body">
                <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight mb-8">Existing Roles</h3>

                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Role Name</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {%for role in roles%}
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
                                <form action="{{url_for(module_name+'.roles_update')}}" method="POST">
                                    <td>
                                        <input value="{{role.name}}" name="role_name" required
                                               class="bg-transparent border-none focus:ring-1 focus:ring-primary/20 rounded-lg py-1 px-2 text-xs font-bold text-slate-700 dark:text-slate-300 w-full">
                                    </td>
                                    <input type="hidden" name="role_id" value="{{role.id}}">
                                    <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
                                    <td class="px-6 py-4 text-right flex items-center justify-end gap-2">
                                        <button class="w-8 h-8 rounded-lg bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all border border-emerald-100 dark:border-emerald-500/20"
                                                type="submit" title="Save Role">
                                            <i class="fas fa-save text-[10px]"></i>
                                        </button>
                                        <a class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-slate-200 dark:border-slate-700"
                                           href="{{url_for(module_name+'.roles_delete', role_id=role.id)}}"
                                           title="Delete Role"
                                           onclick="return confirm('Delete this role?')">
                                            <i class="fas fa-trash-alt text-[10px]"></i>
                                        </a>
                                    </td>                                </form>
                            </tr>
                            {%endfor%}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}