1{% if toolbar.should_render() %}
2{% set items=toolbar.get_items() %}
3<script defer src="{{ asset('toolbar/toolbar.js') }}" nonce="{{ request.csp_nonce }}"></script>
4<div id="plaintoolbar" class="print:hidden text-stone-300 fixed bottom-0 w-full z-50 hidden sm:flex sm:flex-col">
5
6 <div id="plaintoolbar-details" class="hidden relative text-sm border-white/5 shadow-xl border-t inset-shadow-xs inset-shadow-stone-800 rounded-t-xl bg-stone-950/95 backdrop-blur-sm">
7
8 <div class="flex border-b border-white/5 px-2">
9 <div class="flex flex-grow">
10 {% for item in items %}
11 {% if item.name and item.panel_template_name %}
12 <button {% if loop.first %}data-active{% endif %} data-toolbar-tab="{{ item.name }}" class="data-active:border-yellow-500 px-4 py-2.5 -mb-px cursor-pointer border-b border-transparent hover:border-yellow-600" type="button">{{ item.name }}</button>
13 {% endif %}
14 {% endfor %}
15 <button data-plaintoolbar-expand class="flex-grow cursor-pointer inline-flex h-full" type="button"></button>
16 </div>
17 <div class="px-4 flex items-center space-x-4">
18 <button title="Hide toolbar for 1 hour" class="cursor-pointer hover:text-white text-white/50" type="button" data-plaintoolbar-hideuntil>
19 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4" viewBox="0 0 16 16">
20 <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z"/>
21 <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z"/>
22 <path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5"/>
23 </svg>
24 </button>
25 <button class="cursor-pointer hover:text-white text-white/50" type="button" data-plaintoolbar-expand>
26 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4" viewBox="0 0 16 16">
27 <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
28 </svg>
29 </button>
30 </div>
31 </div>
32
33 <div data-resizer class="cursor-grab w-20 h-1.5 top-1 bg-white/15 rounded-full absolute top-0 left-1/2 -translate-x-1/2"></div>
34
35 <div class="overflow-auto h-[30vh] flex flex-col">
36 {% for item in items %}
37 {% if item.name and item.panel_template_name %}
38 <div data-toolbar-tab="{{ item.name }}" class="h-full {% if not loop.first %}hidden{% endif %}">
39 {{ item.render_panel() }}
40 </div>
41 {% endif %}
42 {% endfor %}
43 </div>
44
45 </div>
46
47 <div class="flex px-3 text-xs border-t border-white/5 space-x-4 py-2 bg-stone-950 shadow-xl">
48 <div class="flex items-center">
49 <code class="ml-1.5 bg-white/10 px-1.5 rounded-sm whitespace-nowrap text-mono">{{ toolbar.version }}</code>
50 </div>
51 <button type="button" data-plaintoolbar-expand class="flex-grow cursor-pointer"></button>
52 <div class="flex items-center space-x-4">
53 <div class="flex items-center space-x-3 transition-all">
54
55 {% for item in items %}
56 {% if item.button_template_name %}
57 {{ item.render_button() }}
58 {% endif %}
59 {% endfor %}
60
61 {% include "toolbar/links.html" ignore missing %}
62
63 <button data-plaintoolbar-expand class="hover:text-white text-white/50 cursor-pointer" type="button" title="Expand toolbar">
64 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-3.5 h-3.5" viewBox="0 0 16 16">
65 <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
66 </svg>
67 </button>
68
69 <button data-plaintoolbar-hide class="hover:text-red-500 text-white/50 cursor-pointer" type="button" title="Hide toolbar">
70 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-3.5 h-3.5" viewBox="0 0 16 16">
71 <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
72 </svg>
73 </button>
74
75 </div>
76 </div>
77 </div>
78
79</div>
80{% endif %}