{% comment %}
User Menu Component with Dropdown

Shows user avatar, name, and dropdown menu with:
- Admin panel link (for staff)
- Profile link (optional)
- Logout link (optional)

Parameters:
- show_admin: Show admin link (default: auto-detect if user.is_staff)
- show_profile: Show profile link (default: False)
- show_logout: Show logout link (default: False)
- profile_url: Custom profile URL
- logout_url: Custom logout URL

Usage:
{% include 'django_tailwind/components/user_menu.html' %}

With parameters:
{% include 'django_tailwind/components/user_menu.html' with show_profile=True show_logout=True %}
{% endcomment %}

{% load tailwind_info %}

{% if request.user.is_authenticated %}
<!-- User Menu Dropdown -->
<div class="relative" x-data="{ userMenuOpen: false }" @click.away="userMenuOpen = false">
    <!-- User Avatar Button -->
    <button @click="userMenuOpen = !userMenuOpen"
            class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500">
        <!-- Avatar -->
        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-semibold">
            {% get_user_initials as user_initials %}
            {{ user_initials }}
        </div>

        <!-- User Name (hidden on mobile) -->
        <span class="hidden md:block text-sm font-medium text-gray-700 dark:text-gray-300">
            {% get_user_display_name as user_name %}
            {{ user_name }}
        </span>

        <!-- Dropdown Arrow -->
        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform"
             :class="{ 'rotate-180': userMenuOpen }"
             fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div x-show="userMenuOpen"
         x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 z-50">

        <!-- User Info Section -->
        <div class="px-4 py-3">
            <p class="text-sm font-medium text-gray-900 dark:text-white">
                {{ user_name }}
            </p>
            {% if request.user.email %}
            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                {{ request.user.email }}
            </p>
            {% endif %}
        </div>

        <!-- Menu Items -->
        <div class="py-1">
            {% get_admin_url as admin_url %}

            <!-- Admin Panel Link (for staff only) -->
            {% if show_admin|default:request.user.is_staff %}
            <a href="{{ admin_url }}"
               class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                Admin Panel
            </a>
            {% endif %}

            <!-- Profile Link (optional) -->
            {% if show_profile %}
            <a href="{{ profile_url|default:'/profile/' }}"
               class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                Profile
            </a>
            {% endif %}
        </div>

        <!-- Logout Section -->
        {% if show_logout %}
        <div class="py-1">
            <a href="{{ logout_url|default:'/accounts/logout/' }}"
               class="flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                </svg>
                Logout
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}