<!-- Header -->
<div id="titlebar" style="padding: 15px; margin: -15px; padding-bottom: 30px;"> 

<!-- drag region class: -->
<div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;">

<!--
You might be tempted to replace the unicode character by a fa-code as in the
alternate commend below. Don't do it, it causes all kinds of artifacts and
glitches as the page reloads (and makes it feel much more like an old website
than a proper webapp.
-->
<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> ☰ </button> </a>
<!--
<a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> <i class="fa fa-bars" aria-hidden="true"></i> </button> </a> -->

{% for item in menu_order %}
    <a href="{{ menu[item][1]}}"> <button class="button is-{% if request.path == menu[item][1] %}info{% else %}dark{% endif %}"> {{ menu[item][0]}} </button></a>
{% endfor %}


<div style="position: absolute; top: 15px; right: 15px;">
    <a hx-get="/main/help" hx-swap="outerHTML"/> <button class="button is-light"> <i class="fa fa-question" aria-hidden="true"></i>  </button></a>
    <a hx-trigger="click, keydown[altKey&&code=='F4'] from:body" hx-get="/main/quit" hx-swap="outerHTML"/><button class="button is-danger" >  🗙 </button></a>
</div>

</div> <!-- end pywebview-drag-region -->
<!-- End Header -->
