{% if toolbar.should_render() %}
{% set exception=toolbar.request_exception() %}
<script src="{{ asset('toolbar/toolbar.js') }}"></script>
<div id="plaintoolbar" class="text-sm py-1.5 text-stone-300 bg-stone-950 fixed bottom-3 mx-3 max-w-full drop-shadow-md z-30 rounded-2xl lg:flex lg:flex-col -translate-x-1/2 left-1/2 max-h-[90vh]">
    <div class="flex justify-between px-4 mx-auto space-x-4">
        <div class="flex items-center">
            <svg class="h-4 w-4" width="160" height="125" viewBox="0 0 160 125" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="4.78467" y="4.79785" width="150.978" height="115.404" rx="5" stroke="#ffffff" stroke-width="8"/>
                <path d="M151.762 60.3705C99.2596 39.3233 80.202 66.8232 8.78467 60.3705V116.2H151.762V60.3705Z" fill="#ffffff"/>
                <path d="M51.104 8.08887H108.179V10.7668C108.179 12.6998 106.612 14.2668 104.679 14.2668H54.604C52.671 14.2668 51.104 12.6998 51.104 10.7668V8.08887Z" fill="#ffffff" stroke="#ffffff"/>
            </svg>
            <code class="ml-2 text-xs whitespace-nowrap text-mono">{{ toolbar.version }}</code>

            {% if request.impersonator is defined %}
            <div class="flex items-center ml-1 font-light">
                Impersonating&nbsp;<span class="font-medium">{{ request.user }}</span>
                </span>
                <a href="{{ url('staff: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>
            {% endif %}
        </div>
        <div class="flex items-center space-x-4">
            {% include "querystats/toolbar.html" %}

            <div class="flex items-center space-x-3 transition-all">
                {% include "toolbar/links.html" %}
                <button data-plaintoolbar-expand class="hover:text-orange-500" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div id="plaintoolbar-details" class="{% if not exception %}hidden{% endif %} p-4 overflow-auto text-sm space-y-2">

        {% if exception %}
        <div class="p-2 border-amber-500 border rounded">
            <div class="text-amber-500 text-lg flex justify-between items-center">
                <div>
                    <span class="font-bold">Exception</span>
                    {{ exception }}
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
                </svg>
            </div>
            <div class="text-amber-400 text-xs mt-3 bg-white/5 p-2 rounded overflow-auto">
                <pre><code>{{ exception._traceback_string }}</code></pre>
            </div>
        </div>
        {% endif %}

        <table>
            <tbody>
            {% for k, v in toolbar.metadata.items() %}
            <tr>
                <td class="pr-2 font-medium whitespace-nowrap">{{ k }}</td>
                <td class="whitespace-nowrap">{{ v }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

        {% if object|default(false) %}
        <div class="font-mono" title="PK: {{ object.pk|default('unknown') }}">
            {{ object.__repr__() }}
        </div>
        {% endif %}

        <button data-plaintoolbar-hide class="hover:text-red-500" type="button">
            Hide toolbar for 1 hour
        </button>
    </div>
</div>
{% endif %}
