<!-- bedrock_server_manager/web/templates/monitor.html -->
{# Extends the base layout template #}
{% extends "base.html" %}

{# --- Page Title Block --- #}
{% block title %}{{ super() }} - Monitor Server: {{ server_name }}{% endblock %}

{# --- Main Content Block --- #}
{% block content %}
    {# Main heading for the page #}
    <h2>Server Monitor</h2>

    <div id="status-message-area" class="message-box" style="opacity: 0; transition: opacity 0.5s ease-out;">
        <!-- Status messages appear here -->
    </div>

    {# Display the server context #}
    <p style="margin-bottom: 15px;">Server: <strong>{{ server_name }}</strong></p>

    {# Section containing the monitor output #}
    <section class="monitor-section">

        {# --- Status Display Area --- #}
        <pre id="status-info" class="monitor-output" aria-live="polite" aria-atomic="true" data-server-name="{{ server_name | e }}">Loading server status...</pre>

        {# --- Navigation Link --- #}
        <div class="form-actions monitor-actions">
            <a href="{{ request.url_for('index') }}" class="action-button">
                « Back to Dashboard
            </a>
        </div>

    </section> {# --- End .monitor-section --- #}

{% endblock %}

{% block body_scripts %}
<script src="{{ request.url_for('static', path='js/monitor_usage.js') }}" defer></script>
{% endblock %}