<div class="modal-box">
    <h2 class="text-lg font-bold text-neutral-50">{{ heading }}</h2>
    <p class="mt-2 text-sm text-neutral-400">
        The undo command is not reversible. Are you sure you want to revert to the previous state?
        <ul class="text-neutral-500 text-sm mb-4">
            {% for line in report %}
            <li class="mt-2">{{line | replace(from='\t', to='    ') }}</li>
            {% endfor %}
        </ul>
    </p>
    <div class="modal-action" id="model-undo">
        <button class="btn btn-warning btn-md"
                id="btn-mdl-yes"
                hx-include="[id='filtering']"
                hx-target="#list-of-tasks"
                hx-trigger="click,keyup[key=='Enter'] from:body"
                hx-post="tasks/undo/confirmed">
            <kbd class="shortcut_key">Enter</kbd> Yes, Sure
        </button>

        <button  class="btn btn-success btn-md"
                hx-get="tasks"
                hx-trigger="click,keyup[key=='Escape'] from:all-dialog-boxes"
                hx-include="[id='filtering']"
                hx-target="#list-of-tasks">
            <kbd class="shortcut_key">Esc</kbd> Cancel
        </button>
    </div>
    <script>
        document.getElementById('all-dialog-boxes').showModal()
    </script>
</div>
