{% extends "superadmin/base_superadmin.html" %}

{% block title %}Security - Superadmin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="border-b border-gray-200 pb-4">
        <h1 class="text-2xl font-bold text-gray-900">Security Management</h1>
        <p class="text-gray-600 mt-1">System security monitoring and access control</p>
    </div>

    <!-- Security Overview -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Total Admins -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-red-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user-shield text-3xl text-red-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Admins</dt>
                            <dd class="text-2xl font-bold text-red-600">{{ total_admins }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">System administrators</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Group Admins -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-blue-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-users-cog text-3xl text-blue-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Group Admins</dt>
                            <dd class="text-2xl font-bold text-blue-600">{{ total_group_admins }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">Group administrators</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inactive Members -->
        <div class="bg-white overflow-hidden shadow rounded-lg border-l-4 border-yellow-500">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user-slash text-3xl text-yellow-600"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Inactive Members</dt>
                            <dd class="text-2xl font-bold text-yellow-600">{{ inactive_members }}</dd>
                            <dd class="text-xs text-gray-400 mt-1">Disabled accounts</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Security Alerts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Groups Without Admins -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>Security Alerts
                </h3>
            </div>
            <div class="p-6">
                {% if groups_without_admins %}
                <div class="space-y-4">
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-circle text-red-600 mr-3"></i>
                            <div>
                                <h4 class="text-sm font-medium text-red-900">Groups Without Admins</h4>
                                <p class="text-sm text-red-700 mt-1">{{ groups_without_admins|length }} groups have no assigned administrators</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        {% for group in groups_without_admins %}
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ group.name }}</p>
                                <p class="text-xs text-gray-500">{{ group.group_code }}</p>
                            </div>
                            <button class="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1 px-3 rounded transition-colors">
                                Assign Admin
                            </button>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% else %}
                <div class="text-center py-8">
                    <i class="fas fa-shield-alt text-6xl text-green-600 mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900">All Groups Secure</h3>
                    <p class="text-sm text-gray-500 mt-2">All groups have assigned administrators</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Recent Admin Activity -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-history text-blue-600 mr-2"></i>Recent Admin Activity
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    {% for admin in recent_admin_logins %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                {% if admin.is_superadmin %}
                                <i class="fas fa-crown text-blue-600"></i>
                                {% else %}
                                <i class="fas fa-user-shield text-blue-600"></i>
                                {% endif %}
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-900">{{ admin.full_name }}</p>
                                <p class="text-xs text-gray-500">{{ admin.username }} • {{ admin.custom_id or 'No ID' }}</p>
                                <p class="text-xs text-gray-400">{{ admin.group.name if admin.group else 'No Group' }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            {% if admin.is_superadmin %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                Superadmin
                            </span>
                            {% elif admin.is_group_admin %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                Group Admin
                            </span>
                            {% else %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                Admin
                            </span>
                            {% endif %}
                            <p class="text-xs text-gray-500 mt-1">Last: {{ admin.updated_at.strftime('%b %d, %Y') if admin.updated_at else 'Never' }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Security Settings -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-cog text-purple-600 mr-2"></i>Security Settings
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Password Policy -->
                <div class="space-y-4">
                    <h4 class="text-sm font-medium text-gray-900">Password Policy</h4>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-700">Minimum Length</span>
                            <span class="text-sm font-medium text-gray-900">8 characters</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-700">Require Special Characters</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                Disabled
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-700">Password Expiry</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                Never
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Access Control -->
                <div class="space-y-4">
                    <h4 class="text-sm font-medium text-gray-900">Access Control</h4>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-700">Session Timeout</span>
                            <span class="text-sm font-medium text-gray-900">24 hours</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-700">Multi-Factor Auth</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                Disabled
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-700">IP Restrictions</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                Disabled
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Security Recommendations -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start">
            <i class="fas fa-lightbulb text-blue-600 mr-3 mt-0.5"></i>
            <div>
                <h4 class="text-sm font-medium text-blue-900">Security Recommendations</h4>
                <ul class="text-sm text-blue-700 mt-2 space-y-1">
                    <li>• Enable multi-factor authentication for all admin accounts</li>
                    <li>• Implement password expiry policy (90 days recommended)</li>
                    <li>• Review and audit admin permissions regularly</li>
                    <li>• Monitor failed login attempts and suspicious activity</li>
                    <li>• Ensure all groups have assigned administrators</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}