{% extends 'commands.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block nav_logs %} active{% endblock %}
{% block nav_logs_log %} active{% endblock %}
{% block content %}

<h2 class="mx-5 subhead-heading">{{_('Client log')}}</h2>

<style>
    /* Prevent overflow */
    pre {
        max-width: 100%;
        overflow: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>

<div class="container-fluid d-flex flex-column" style="height: 90vh;">
    <div class="border p-3 overflow-auto flex-grow-1" id="logContainer">
        <pre>{{ log }}</pre>
    </div>
</div>

<script>
    function scrollToBottom() {
        const logContainer = document.getElementById('logContainer');
        logContainer.scrollTo({ top: logContainer.scrollHeight, behavior: 'instant' });
    }

    document.addEventListener("DOMContentLoaded", scrollToBottom);
</script>


{% endblock %}
