{% load i18n static%}
<div class="topbar d-flex align-items-center px-4">
    <!-- Mobile Menu Toggle -->
    <button class="btn btn-link text-teal d-lg-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">
        <img src="{% static 'img/logo.png' %}" height="50">
{#        <h5 class="mb-0 text-teal-dark">{% 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" style="border-color: var(--hh-border);">
                <i class="bi bi-search text-teal"></i>
            </span>
            <input type="text" class="form-control border-start-0" placeholder="{% trans 'Search...' %}" style="border-color: var(--hh-border);">
        </div>
    </div>

    <!-- Notifications -->
    <div class="dropdown me-3">
        <button class="btn btn-link position-relative p-0 text-teal" 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: 320px;">
            <li class="dropdown-header d-flex justify-content-between align-items-center">
                <span class="fw-semibold">{% trans "Notifications" %}</span>
                <a href="#" class="text-teal small">{% trans "View All" %}</a>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li>
                <a class="dropdown-item py-2" href="#">
                    <div class="d-flex align-items-start">
                        <div class="avatar avatar-sm avatar-teal me-2">
                            <i class="bi bi-bell"></i>
                        </div>
                        <div class="flex-grow-1">
                            <p class="mb-0 small">{% trans "No new notifications" %}</p>
                            <small class="text-muted">{% trans "You're all caught up!" %}</small>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <!-- Language Toggle -->
    <div class="dropdown me-3">
        <button class="btn btn-link text-teal" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-translate fs-5"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li class="dropdown-header">{% trans "Select Language" %}</li>
            <li><hr class="dropdown-divider"></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="en">
                    <button type="submit" class="dropdown-item d-flex align-items-center">
                        <span class="me-2">🇺🇸</span> 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 d-flex align-items-center">
                        <span class="me-2">🇸🇦</span> العربية
                    </button>
                </form>
            </li>
        </ul>
    </div>

    <!-- User Menu -->
    <div class="dropdown">
        <button class="btn btn-link d-flex align-items-center text-decoration-none" type="button" data-bs-toggle="dropdown">
            <div class="me-2 text-end d-none d-md-block">
                <div class="fw-semibold" style="color: var(--hh-text-dark);">{{ user.get_full_name|default:user.username|default:"User" }}</div>
                <small style="color: var(--hh-text-muted);">{% if user.get_role_names %}{{ user.get_role_names.0 }}{% else %}User{% endif %}</small>
            </div>
            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                 style="width: 40px; height: 40px;">
                {% if user.first_name %}{{ user.first_name.0|upper }}{% elif user.username %}{{ user.username.0|upper }}{% else %}U{% endif %}
            </div>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li class="dropdown-header">
                <div class="d-flex align-items-center">
{#                    <div class="avatar avatar-teal me-2">#}
{#                        {{ user.first_name.0|default:user.username.0|upper }}#}
{#                    </div>#}
                    <div>
                        <div class="fw-semibold">{{ user.get_full_name|default:user.username }}</div>
                        <small class="text-muted">{{ user.email }}</small>
                    </div>
                </div>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2 text-teal"></i>{% trans "Profile" %}</a></li>
            <li><a class="dropdown-item" href="{% url 'accounts:settings' %}"><i class="bi bi-gear me-2 text-teal"></i>{% trans "Settings" %}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="{% url 'accounts:logout' %}" onclick="return confirmLogout()"><i class="bi bi-box-arrow-right me-2"></i>{% trans "Logout" %}</a></li>
        </ul>
    </div>
</div>

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