{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-2">Welcome to Your Dashboard</h1>
    <p class="text-lg text-gray-600">Hello, <strong class="text-gray-900">{{ user.full_name|default:user.email }}</strong>!</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-lg shadow-lg border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-xl font-semibold text-gray-900">Account Information</h2>
        </div>
        <div class="px-6 py-6">
            <div class="space-y-4">
                <p class="text-gray-700"><strong class="text-gray-900">Email:</strong> {{ user.email }}</p>
                <p class="text-gray-700"><strong class="text-gray-900">Name:</strong> {{ user.full_name|default:"Not set" }}</p>
                <p class="text-gray-700"><strong class="text-gray-900">Username:</strong> {{ user.username }}</p>
                <p class="text-gray-700"><strong class="text-gray-900">Member since:</strong> {{ user.date_joined|date:"M d, Y" }}</p>
                <p class="text-gray-700">
                    <strong class="text-gray-900">Email verified:</strong> 
                    {% if user.is_verified %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Yes</span>
                    {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">No</span>
                    {% endif %}
                </p>
            </div>
            <div class="mt-6">
                <a href="{% url 'accounts:profile_edit' %}" class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 inline-flex items-center">
                    Edit Profile
                </a>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-lg shadow-lg border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-xl font-semibold text-gray-900">Your Roles</h2>
        </div>
        <div class="px-6 py-6">
            <div class="mb-4">
                {% if user_groups %}
                    <div class="flex flex-wrap gap-2">
                        {% for group in user_groups %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ group.name|title }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-gray-500">No roles assigned</p>
                {% endif %}
            </div>
            
            <hr class="my-4 border-gray-200">
            
            <div>
                <h3 class="text-sm font-semibold text-gray-900 mb-3">Access Levels:</h3>
                <ul class="space-y-2">
                    <li class="flex items-center text-sm">
                        <span class="text-green-500 mr-2">✓</span>
                        <span class="text-gray-700">User Dashboard</span>
                    </li>
                    {% if user.groups.all %}
                        {% for group in user.groups.all %}
                            {% if group.name == 'staff' or group.name == 'admin' %}
                                <li class="flex items-center text-sm">
                                    <span class="text-green-500 mr-2">✓</span>
                                    <a href="{% url 'core:staff_dashboard' %}" class="text-gray-700 hover:text-black transition-colors duration-200">Staff Dashboard</a>
                                </li>
                            {% endif %}
                            {% if group.name == 'admin' %}
                                <li class="flex items-center text-sm">
                                    <span class="text-green-500 mr-2">✓</span>
                                    <a href="{% url 'core:admin_dashboard' %}" class="text-gray-700 hover:text-black transition-colors duration-200">Admin Dashboard</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        {% if not user.groups.filter|length %}
                            <li class="flex items-center text-sm">
                                <span class="text-gray-400 mr-2">✗</span>
                                <span class="text-gray-500">Staff Dashboard</span>
                            </li>
                            <li class="flex items-center text-sm">
                                <span class="text-gray-400 mr-2">✗</span>
                                <span class="text-gray-500">Admin Dashboard</span>
                            </li>
                        {% endif %}
                    {% else %}
                        <li class="flex items-center text-sm">
                            <span class="text-gray-400 mr-2">✗</span>
                            <span class="text-gray-500">Staff Dashboard</span>
                        </li>
                        <li class="flex items-center text-sm">
                            <span class="text-gray-400 mr-2">✗</span>
                            <span class="text-gray-500">Admin Dashboard</span>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}