{% load i18n %}
<div class="topbar d-flex align-items-center px-4">
    <!-- Mobile Menu Toggle -->
    <button class="btn btn-link d-md-none me-3" type="button" onclick="document.querySelector('.sidebar').classList.toggle('show')">
        <i class="bi bi-list fs-4"></i>
    </button>
    
    <!-- Page Title -->
    <div class="flex-grow-1">
        <h5 class="mb-0">{% block page_title %}{% trans "Dashboard" %}{% endblock %}</h5>
    </div>
    
    <!-- Search -->
    <div class="me-3 d-none d-md-block">
        <div class="input-group" style="width: 300px;">
            <span class="input-group-text bg-white border-end-0">
                <i class="bi bi-search"></i>
            </span>
            <input type="text" class="form-control border-start-0" placeholder="{% trans 'Search...' %}">
        </div>
    </div>
    
    <!-- Notifications -->
    <div class="dropdown me-3">
        <button class="btn btn-link position-relative p-0" type="button" data-bs-toggle="dropdown" style="line-height: 1;">
            <i class="bi bi-bell fs-5"></i>
            {% if notification_count|default:0 > 0 %}
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.65rem;">
                {{ notification_count }}
            </span>
            {% endif %}
        </button>
        <ul class="dropdown-menu dropdown-menu-end" style="width: 300px;">
            <li class="dropdown-header">{% trans "Notifications" %}</li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">{% trans "No new notifications" %}</a></li>
        </ul>
    </div>
    
    <!-- Language Toggle -->
    <div class="dropdown me-3">
        <button class="btn btn-link" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-translate fs-5"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li>
                <form action="{% url 'set_language' %}" method="post" style="display: inline;">
                    {% csrf_token %}
                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
                    <input type="hidden" name="language" value="en">
                    <button type="submit" class="dropdown-item">English</button>
                </form>
            </li>
            <li>
                <form action="{% url 'set_language' %}" method="post" style="display: inline;">
                    {% csrf_token %}
                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
                    <input type="hidden" name="language" value="ar">
                    <button type="submit" class="dropdown-item">العربية</button>
                </form>
            </li>
        </ul>
    </div>
    
    <!-- User Menu -->
    <div class="dropdown">
        <button class="btn btn-link d-flex align-items-center" type="button" data-bs-toggle="dropdown">
            <div class="me-2 text-end d-none d-md-block">
                <div class="fw-semibold">{{ user.get_full_name|default:user.username }}</div>
                <small class="text-muted">{{ user.get_role_names.0|default:"User" }}</small>
            </div>
            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" 
                 style="width: 40px; height: 40px;">
                {{ user.first_name.0|default:user.username.0|upper }}
            </div>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>{% trans "Profile" %}</a></li>
            <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>{% trans "Settings" %}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{% url 'admin:logout' %}"><i class="bi bi-box-arrow-right me-2"></i>{% trans "Logout" %}</a></li>
        </ul>
    </div>
</div>