{% extends "base_juice.html" %}

{% block content %}

<div class="block">
    <h1>System Overview</h1>

    <div class="row g-4">

        <!-- Parameter Monitor -->
        <div class="col-12">
            <div class="card mb-4 h-100">
                <div class="card-body">
                    <h2 class="h4 mb-3">Parameter Monitor</h2>
                    <div class="row">
                        <div class="col">
                            {{ embed(roots.system_throttle_state_display) }}
                            {{ embed(roots.parameter_monitor) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Users -->
        <div class="col-lg-6">
            <div class="card mb-4 h-100">
                <div class="card-body">
                    <h2 class="h4">Active Users</h2>
                    {{ embed(roots.active_user_widget) }}
                </div>
            </div>
        </div>

        <!-- Control PC Resource Usage -->
        <div class="col-lg-6">
            <div class="card mb-4 h-100">
                <div class="card-body">
                    <h2 class="h4">Control PC Resource Usage</h2>
                    {{ embed(roots.control_pc_table) }}
                </div>
            </div>
        </div>

        <!-- Service Resource Usage -->
        <div class="col-xxl-6">
            <div class="card mb-4 h-100">
                <div class="card-body h-100">
                    <h2 class="h4">Service Resource Usage</h2>
                    {{ embed(roots.service_usage_table) }}
                </div>
            </div>
        </div>

    </div>

</div>

{% endblock %}