{% load i18n static %}
<header class="topbar fixed left-0 right-0 top-0 bg-white border-b border-gray-100 z-40 px-8 py-4 flex items-center justify-between" style="left: 16rem;">
    <!-- Mobile Menu Toggle -->
    <button class="lg:hidden p-2 text-gray-400 hover:bg-gray-100 rounded-full transition" onclick="toggleSidebar()">
        <i data-lucide="menu" class="w-6 h-6"></i>
    </button>

    <!-- Greeting & Page Title -->
    <div class="flex-1">
        <h2 class="text-2xl font-bold text-gray-800">
            {% block page_title %}
            {% if user.first_name %}
            {% trans "Good morning" %}, {{ user.first_name }}! ☀️
            {% else %}
            {% trans "Dashboard" %}
            {% endif %}
            {% endblock %}
        </h2>
        {% block page_subtitle %}
        <p class="text-gray-400 text-sm mt-1">{% trans "Welcome to PX360 Patient Experience Management" %}</p>
        {% endblock %}
    </div>

    <!-- Right Side Actions -->
    <div class="flex items-center gap-4">
        <!-- Search -->
        <div class="hidden md:flex items-center relative">
            <i data-lucide="search" class="w-5 h-5 absolute left-4 text-gray-400"></i>
            <input type="text" 
                   placeholder="{% trans 'Search...' %}" 
                   class="pl-12 pr-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition w-64">
        </div>

        <!-- Notifications -->
        <div class="relative">
            <button type="button" 
                    onclick="document.getElementById('notificationDropdown').classList.toggle('hidden')"
                    class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition relative">
                <i data-lucide="bell" class="w-6 h-6"></i>
                {% if notification_count > 0 %}
                <span id="notification-count-badge" class="absolute -top-1 -right-1 min-w-[20px] h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center px-1.5 border-2 border-white">
                    {{ notification_count }}
                </span>
                {% else %}
                <span id="notification-count-badge" class="hidden absolute -top-1 -right-1 min-w-[20px] h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center px-1.5 border-2 border-white"></span>
                {% endif %}
            </button>
            <div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden z-50">
                <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="font-bold text-gray-800">{% trans "Notifications" %}</h3>
                    <a href="{% url 'notifications:inbox' %}" class="text-navy text-sm font-bold hover:underline">{% trans "View All" %}</a>
                </div>
                <div id="notificationDropdownContent" class="max-h-80 overflow-y-auto">
                    <!-- Notifications will be loaded here via JavaScript -->
                    <div class="p-8 text-center">
                        <div class="bg-gray-100 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                            <i data-lucide="bell" class="w-8 h-8 text-gray-400"></i>
                        </div>
                        <p class="text-gray-600 font-medium">{% trans "Loading..." %}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Language Toggle -->
        <div class="relative">
            <button type="button"
                    onclick="document.getElementById('languageDropdown').classList.toggle('hidden')"
                    class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition">
                <i data-lucide="globe" class="w-6 h-6"></i>
            </button>
            <div id="languageDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden z-50">
                <div class="p-2">
                    <form action="{% url 'set_language' %}" method="post">
                        {% csrf_token %}
                        <input name="next" type="hidden" value="{{ request.get_full_path }}">
                        <input type="hidden" name="language" value="en">
                        <button type="submit" class="w-full flex items-center gap-3 p-3 hover:bg-gray-50 rounded-xl transition text-left">
                            <span class="text-2xl">🇺🇸</span>
                            <span class="text-gray-800 font-medium">{% trans "English" %}</span>
                            {% if LANGUAGE_CODE == 'en' %}
                            <i data-lucide="check" class="w-4 h-4 text-navy ml-auto"></i>
                            {% endif %}
                        </button>
                    </form>
                    <form action="{% url 'set_language' %}" method="post">
                        {% csrf_token %}
                        <input name="next" type="hidden" value="{{ request.get_full_path }}">
                        <input type="hidden" name="language" value="ar">
                        <button type="submit" class="w-full flex items-center gap-3 p-3 hover:bg-gray-50 rounded-xl transition text-left">
                            <span class="text-2xl">🇸🇦</span>
                            <span class="text-gray-800 font-medium">{% trans "العربية" %}</span>
                            {% if LANGUAGE_CODE == 'ar' %}
                            <i data-lucide="check" class="w-4 h-4 text-navy ml-auto"></i>
                            {% endif %}
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- User Menu -->
        <div class="relative">
            <button type="button"
                    onclick="document.getElementById('userDropdown').classList.toggle('hidden')"
                    class="flex items-center gap-3 p-2 hover:bg-gray-100 rounded-xl transition">
                <div class="text-right hidden md:block">
                    <div class="font-bold text-gray-800 text-sm">{{ user.get_full_name|default:user.username|default:"User" }}</div>
                    <div class="text-xs text-gray-400">
                        {% if user.get_role_names %}{{ user.get_role_names.0 }}{% else %}{% trans "User" %}{% endif %}
                    </div>
                </div>
                <div class="bg-gradient-to-br from-blue to-navy text-white rounded-xl flex items-center justify-center font-bold w-10 h-10 shadow-md">
                    {% if user.first_name %}{{ user.first_name.0|upper }}{% elif user.username %}{{ user.username.0|upper }}{% else %}U{% endif %}
                </div>
                <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400"></i>
            </button>
            <div id="userDropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden z-50">
                <div class="p-4 bg-gradient-to-br from-light to-blue-50 border-b border-gray-100">
                    <div class="flex items-center gap-3">
                        <div class="bg-gradient-to-br from-blue to-navy text-white rounded-xl flex items-center justify-center font-bold w-12 h-12 shadow-md text-lg">
                            {% if user.first_name %}{{ user.first_name.0|upper }}{% elif user.username %}{{ user.username.0|upper }}{% else %}U{% endif %}
                        </div>
                        <div>
                            <div class="font-bold text-gray-800">{{ user.get_full_name|default:user.username }}</div>
                            <div class="text-xs text-gray-500">{{ user.email }}</div>
                        </div>
                    </div>
                </div>
                <div class="p-2">
                    <a href="{% url 'accounts:settings' %}#profile" class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-xl transition text-gray-700">
                        <i data-lucide="user" class="w-5 h-5 text-navy"></i>
                        <span class="text-sm font-medium">{% trans "Profile" %}</span>
                    </a>
                    <a href="{% url 'accounts:settings' %}" class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-xl transition text-gray-700">
                        <i data-lucide="settings" class="w-5 h-5 text-navy"></i>
                        <span class="text-sm font-medium">{% trans "Settings" %}</span>
                    </a>
                    <div class="my-1 border-t border-gray-100"></div>
                    <form action="{% url 'accounts:logout' %}" method="post" onsubmit="return confirmLogout()">
                        {% csrf_token %}
                        <button type="submit" class="w-full flex items-center gap-3 p-3 hover:bg-red-50 rounded-xl transition text-red-500">
                            <i data-lucide="log-out" class="w-5 h-5"></i>
                            <span class="text-sm font-medium">{% trans "Logout" %}</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
function confirmLogout() {
    return confirm("{% trans 'Are you sure you want to logout?' %}");
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(e) {
    const dropdowns = ['notificationDropdown', 'languageDropdown', 'userDropdown'];
    dropdowns.forEach(id => {
        const dropdown = document.getElementById(id);
        if (dropdown && !dropdown.contains(e.target) && !e.target.closest('button')) {
            dropdown.classList.add('hidden');
        }
    });
});
</script>