{% extends "admin/base_admin.html" %}

{% block title %}No Group Assigned{% endblock %}

{% block content %}
<div class="px-4 py-6 mx-auto max-w-screen-xl">
    <div class="min-h-[60vh] flex items-center justify-center">
        <div class="text-center">
            <div class="mb-6">
                <div class="w-24 h-24 mx-auto bg-gray-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-users text-4xl text-gray-400"></i>
                </div>
            </div>
            
            <h1 class="text-3xl font-bold text-gray-900 mb-4">No Group Assigned</h1>
            <p class="text-lg text-gray-600 mb-6 max-w-md mx-auto">
                You don't have access to any groups yet. Contact your system administrator to get assigned to a group.
            </p>
            
            <div class="space-y-4">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-left max-w-md mx-auto">
                    <h3 class="font-semibold text-blue-900 mb-2">What you can do:</h3>
                    <ul class="text-sm text-blue-800 space-y-1">
                        <li>• Contact the superadmin to request group access</li>
                        <li>• Ask to be assigned to an existing group</li>
                        <li>• Request creation of a new group if needed</li>
                    </ul>
                </div>
                
                <div class="flex justify-center space-x-4">
                    <a href="{{ url_for('index') }}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-home mr-2"></i>
                        Go to Homepage
                    </a>
                    
                    <a href="{{ url_for('logout') }}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-sign-out-alt mr-2"></i>
                        Logout
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}