{% extends "layout.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
  <div class="d-flex">
    <h3 class="me-auto">Dashboard</h3>
  </div>
  <hr />
  <section id="guest">
    <h5>Guest Information</h5>
    <hr />
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Machines</h5>
            <p class="card-text">Count: {{ g.api.machines | length }}</p>
          </div>
          <ul class="list-group list-group-flush">
            {% for health, machines in g.api.machines | groupby("health") %}
              <li class="list-group-item">{{ health.name | replace('_', ' ') | title }}: {{ machines | length }}</li>
            {% endfor %}
          </ul>
          <div class="card-body">
            <a href="{{ url_for('machine.overview') }}" class="btn btn-primary">View</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Mediums</h5>
            <p class="card-text">Count: {{ g.api.mediums | length }}</p>
          </div>
          <ul class="list-group list-group-flush">
            {% for device_type, mediums in g.api.mediums | groupby("device_type_name") %}
              <li class="list-group-item">{{ device_type }}: {{ mediums | length }}</li>
            {% endfor %}
          </ul>
          <div class="card-body">
            <a href="{{ url_for('medium.overview') }}" class="btn btn-primary">View</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="pt-3" id="host">
    <h5>Host Information</h5>
    <hr />
    <div class="row">
      <div class="col">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <section id="system">
              <h5>System</h5>
              <p>
                <b>Operating System: </b>{{ g.api.host.operating_system }} {{ g.api.host.os_version }}
                <br />
                <b>Memory: </b><span class="font-monospace">{{ g.api.host.memory_available }}/{{ g.api.host.memory_size }} MB</span>
                <br />
                <b>Processors: </b>{{ g.api.host.processor_count }} logical ({{ g.api.host.processor_core_count }} physical) @ {{ g.api.host.get_processor_speed(0) }} MHz
                <br />
                <b>3D Acceleration: </b>{{ g.api.host.acceleration_3d_available }}
                <br />
              </p>
            </section>
          </li>
          <li class="list-group-item">
            <section id="drives">
              <h5>Drives</h5>
              <p>
                {% for drive in g.api.host.host_drives | sort(attribute="drive_path") %}
                  <b>Path: </b><span class="font-monospace">{{ drive.drive_path }}</span>
                  <br />
                  <b>Model: </b><span class="font-monospace">{{ drive.model }}</span>
                  <br />
                  <br />
                {% endfor %}
              </p>
            </section>
          </li>
        </ul>
      </div>
      <div class="col">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <section id="network">
              <h5>Network</h5>
              <p>
                {% for network in g.api.host.network_interfaces %}
                  <b>{{ network.name }}: </b>{{ utils.split_pascal_case(network.interface_type) }}
                  <br />
                  <b>IP Address: </b><span class="font-monospace">{{ network.ip_address }}</span>
                  <br />
                  <b>MAC Address: </b><span class="font-monospace">{{ network.hardware_address }}</span>
                  <br />
                  <b>Wireless: </b>{{ network.wireless }}
                  <br />
                  <br />
                {% endfor %}
                <b>DNS Servers: </b><span class="font-monospace">{{ ', '.join(g.api.host.name_servers) }}</span>
              </p>
            </section>
          </li>
        </ul>
      </div>
    </div>
  </section>
{% endblock %}