{% if request.user.is_staff or request.impersonator.is_staff %}
<div id="stafftoolbar" class="{{ stafftoolbar_outer_class|default:'py-2 text-sm text-zinc-200 bg-zinc-900' }}">
    <div class="{{ stafftoolbar_inner_class|default:'container px-4 space-x-8 mx-auto flex justify-between' }}">
        <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4 mr-1 bi bi-person-badge" viewBox="0 0 16 16">
                <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z"/>
            </svg>
            {% if request.impersonator %}
            <span class="font-medium">{{ request.impersonator }}</span>
            <div class="flex items-center font-light">
                &nbsp;is impersonating&nbsp;<span class="font-medium">{{ request.user }}</span>
                </span>
                <a href="{% url 'impersonate:stop' %}" title="Stop impersonating" class="flex items-center px-1 ml-1 text-red-300 hover:text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4 bi bi-x-octagon-fill" viewBox="0 0 16 16">
                        <path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zm-6.106 4.5L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
                    </svg>
                </a>
            </div>
            {% else %}
            <span class="font-medium">{{ request.user }}</span>
            {% endif %}
        </div>
        <div class="flex items-center space-x-4">

            <div class="relative group">
                <code class="text-xs text-mono cursor-help">{{ stafftoolbar.release }}</code>
                <div class="absolute top-0 left-0 hidden pt-6 group-hover:block -translate-x-3/4">
                    <div class="p-2 text-xs border rounded shadow-md bg-zinc-900 border-zinc-700">
                        <table>
                            <tbody>
                            {% for k, v in stafftoolbar.release.metadata %}
                            <tr>
                                <td class="pr-2 font-medium whitespace-nowrap">{{ k }}</td>
                                <td class="whitespace-nowrap">{{ v }}</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {% if querystats_enabled %}{% include "querystats/stafftoolbar.html" %}{% endif %}

            {% if requestlog_enabled %}{% include "requestlog/stafftoolbar.html" %}{% endif %}

            <div class="flex items-center space-x-3">
                {% for link in stafftoolbar.links %}
                <a href="{{ link.url }}" class="hover:underline">{{ link.text }}</a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endif %}