{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Role Management Dashboard{% endblock %}

{% block content %}
<div class="p-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Role Management</h1>
            <p class="text-gray-600 mt-1">Kelola role, permission, dan assignment dalam sistem</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{% url 'admin_panel:role_admin:role_create' %}" 
               class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-plus mr-2"></i>Tambah Role
            </a>
            <a href="{% url 'admin_panel:role_admin:permission_create' %}" 
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-key mr-2"></i>Tambah Permission
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
        <!-- Total Roles -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Role</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ total_roles }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ active_roles }} aktif</p>
                </div>
                <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-tag text-green-600 text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Assignments -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Assignment</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ total_assignments }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ active_assignments }} aktif</p>
                </div>
                <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-users text-blue-600 text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Permissions -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Permission</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ total_permissions }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ active_permissions }} aktif</p>
                </div>
                <div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-key text-purple-600 text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <!-- Roles -->
        <a href="{% url 'admin_panel:role_admin:role_list' %}" 
           class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all hover:scale-105">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-user-tag text-green-600 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900">Kelola Role</h3>
                    <p class="text-sm text-gray-600">Lihat dan kelola semua role</p>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </a>

        <!-- Assignments -->
        <a href="{% url 'admin_panel:role_admin:role_assignment_list' %}" 
           class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all hover:scale-105">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-users text-blue-600 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900">Kelola Assignment</h3>
                    <p class="text-sm text-gray-600">Lihat dan kelola role assignment</p>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </a>

        <!-- Permissions -->
        <a href="{% url 'admin_panel:role_admin:permission_list' %}" 
           class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all hover:scale-105">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-key text-purple-600 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900">Kelola Permission</h3>
                    <p class="text-sm text-gray-600">Lihat dan kelola semua permission</p>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </a>
    </div>

    <!-- Recent Roles & Top Roles -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Roles -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-lg font-semibold text-gray-900">Role Terbaru</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for role in recent_roles %}
                <div class="px-6 py-4 hover:bg-gray-50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user-tag text-green-600"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ role.name }}</p>
                                <p class="text-xs text-gray-500">{{ role.get_role_type_display }}</p>
                            </div>
                        </div>
                        <a href="{% url 'admin_panel:role_admin:role_edit' role.id %}" 
                           class="text-green-600 hover:text-green-800">
                            <i class="fas fa-edit"></i>
                        </a>
                    </div>
                </div>
                {% empty %}
                <div class="px-6 py-8 text-center text-gray-500">
                    <i class="fas fa-inbox text-3xl mb-2"></i>
                    <p>Tidak ada role</p>
                </div>
                {% endfor %}
            </div>
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <a href="{% url 'admin_panel:role_admin:role_list' %}" 
                   class="text-sm text-green-600 hover:text-green-800 font-medium">
                    Lihat Semua <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>

        <!-- Top Roles -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-lg font-semibold text-gray-900">Role Paling Banyak Digunakan</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for role in top_roles %}
                <div class="px-6 py-4 hover:bg-gray-50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-users text-blue-600"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ role.name }}</p>
                                <p class="text-xs text-gray-500">{{ role.assignment_count }} assignment</p>
                            </div>
                        </div>
                        <a href="{% url 'admin_panel:role_admin:role_edit' role.id %}" 
                           class="text-blue-600 hover:text-blue-800">
                            <i class="fas fa-edit"></i>
                        </a>
                    </div>
                </div>
                {% empty %}
                <div class="px-6 py-8 text-center text-gray-500">
                    <i class="fas fa-inbox text-3xl mb-2"></i>
                    <p>Tidak ada data</p>
                </div>
                {% endfor %}
            </div>
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <a href="{% url 'admin_panel:role_admin:role_assignment_list' %}" 
                   class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                    Lihat Semua Assignment <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}