{% load i18n %}
<div class="tab-pane" id="graphics" role="tabpanel" data-url="{% url 'instances:stats' instance.id %}"
     data-average-over="{% trans "average over" %}" data-in="{% trans "In" %}" data-out="{% trans "Out" %}"
     data-read="{% trans "Read" %}" data-write="{% trans "Write" %}">
    <div class="card">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
            <p class="small text-body-secondary mb-0 me-auto">
                {% if instance.status == 1 %}
                    {% trans "Updates every 5 seconds." %}
                {% else %}
                    {% trans "The VM is not running: nothing is measured." %}
                {% endif %}
            </p>
            {% if request.user.is_superuser %}
            <div class="btn-group btn-group-sm" role="tablist" aria-label="{% trans "Stats view" %}">
                <button class="btn btn-outline-secondary active" type="button" data-bs-toggle="tab" data-bs-target="#graphs" role="tab" aria-controls="graphs" aria-selected="true">{% trans "Graphs" %}</button>
                <button class="btn btn-outline-secondary" id="logs-tab" type="button" data-bs-toggle="tab" data-bs-target="#logs" role="tab" aria-controls="logs" aria-selected="false">{% trans "Logs" %}</button>
            </div>
            {% endif %}
        </div>
        <div class="tab-content">
            <div class="tab-pane active" id="graphs" role="tabpanel">
                <div class="row g-3">
                    <section class="col-12 col-md-6">
                        <div class="d-flex flex-wrap align-items-baseline gap-2 mb-2">
                            <h2 class="h6 mb-0">{% trans "CPU" %}</h2>
                            <span><span id="cpuNow"></span> <span class="small text-body-secondary">{% trans "of the host" %}</span></span>
                        </div>
                        <div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU use, recent readings" %}"></canvas></div>
                    </section>
                    <section class="col-12 col-md-6">
                        <div class="d-flex flex-wrap align-items-baseline gap-2 mb-2">
                            <h2 class="h6 mb-0">{% trans "Memory" %}</h2>
                            <span id="memNow"></span>
                        </div>
                        <div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory use, recent readings" %}"></canvas></div>
                    </section>
                </div>
                <div class="border-top mt-3 pt-3">
                <div class="row g-3">
                    {% for net in instance.networks %}
                    <section class="col-12 col-md-6 col-lg-4">
                        <h2 class="h6 mb-1">{% trans "Network" %} · {{ net.mac }}</h2>
                        <p class="small text-body-secondary mb-2" id="net{{ net.mac }}Now">&nbsp;</p>
                        <div class="chart position-relative"><canvas id="net{{ net.mac }}Chart" data-mac="{{ net.mac }}" role="img" aria-label="{% blocktrans with mac=net.mac %}Network {{ mac }}, recent readings{% endblocktrans %}"></canvas></div>
                    </section>
                    {% endfor %}
                    {% for disk in instance.disks %}
                    <section class="col-12 col-md-6 col-lg-4">
                        <h2 class="h6 mb-1">{% trans "Disk" %} · {{ disk.dev }}</h2>
                        <p class="small text-body-secondary mb-2" id="blk{{ disk.dev }}Now">&nbsp;</p>
                        <div class="chart position-relative"><canvas id="blk{{ disk.dev }}Chart" data-disk="{{ disk.dev }}" role="img" aria-label="{% blocktrans with dev=disk.dev %}Disk {{ dev }}, recent readings{% endblocktrans %}"></canvas></div>
                    </section>
                    {% endfor %}
                </div>
                </div>
            </div>
            {% if request.user.is_superuser %}
            <div class="tab-pane" id="logs" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0" id="logs_table" data-url="{% url 'vm_logs' instance.id %}"
                       data-empty="{% trans "None" %}" data-failed="{% trans "The logs could not be loaded." %}">
                        <thead>
                            <tr>
                                <th scope="col">{% trans "Date" %}</th>
                                <th scope="col">{% trans "User" %}</th>
                                <th scope="col">{% trans "Message" %}</th>
                                <th scope="col">{% trans "Result" %}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <p class="small text-body-secondary mt-2 mb-0">
                    {% trans "The latest rows, newest first." %}
                    <a href="{% url 'admin:logs' %}?q={{ instance.uuid|urlencode }}">{% trans "All of this VM's logs" %}</a>
                </p>
            </div>
            {% endif %}
        </div>
    </div>
    </div>
</div>