<!-- Buttons on the left -->
<div style="position: absolute; bottom: 15px; left: 15px;">

{% if previous_step %}
    <!-- Why two of these? So that we can use two different keyboard shortcuts for back. -->
    <button style="display: none;" hx-get="/{{ previous_step }}" hx-target="body"
       hx-trigger="click, keydown[altKey&&key=='b'] from:body"></button>
    <a href="/{{ previous_step }}"><button hx-get="/{{ previous_step }}" hx-target="body"
       hx-trigger="click, keydown[ctrlKey&&code=='PageUp'] from:body" class="button is-light">Back</button></a>
{% endif %}

{% if bottom_menu %}
   {{ bottom_menu | safe }}
{% endif %}

</div> <!-- end buttons on the left  -->


<!-- Buttons on the right -->
<div style="position: absolute; bottom: 15px; right: 15px;">

{% if next_step %}

    {% if next_step == "install" %}
        <a href="/{{ next_step }}"><button hx-get="/{{ next_step }}" hx-target="body"
	hx-trigger="click, keyup[altKey&&key=='i'] from:body" class="button is-link">Install</button></a>
    {% else %}
    <!-- Why two of these? So that we can use two different keyboard shortcuts for next. -->
    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
       hx-trigger="click, keydown[ctrlKey&&code=='PageDown'] from:body" class=""></button></a>
    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
       hx-trigger="click, keydown[altKey&&key=='n'] from:body" class="button is-link">Next</button></a>
    {% endif %}
    {% endif %}

</div> <!-- end buttons on the right -->
