125 lines
6.0 KiB
HTML
125 lines
6.0 KiB
HTML
{% 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 }}</div>
|
|
<small style="color: var(--hh-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 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="#"><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>
|