{% extends "base_juice.html" %}

{% block content %}

<div class="block">
    <h1>System Overview</h1>
    {% if setup_name %}
    <div class="text-muted mb-4">
        Setup name:
        {% if setup_name == "Unknown setup" %}
        <div style="display: inline-flex; align-items: center; white-space: nowrap;">
            <strong>{{ setup_name }}</strong>
            <div style="display: inline-block; margin-left: 0.4rem; line-height: 1;">{{ setup_name_hint_widget }}</div>
        </div>
        {% else %}
        <strong>{{ setup_name }}</strong>
        {% endif %}
    </div>
    {% endif %}

    <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 %}