{% extends "daisy/base.html" %}

{% block title %}
    <title>{{ request.site.name }} Dashboard</title>
{% endblock title %}

{% block content-header %}
    <h1 class="lg:text-2xl lg:font-light">Site Overview</h1>
{% endblock content-header %}


{% block content %}
    <div class="my-5">
        <h2>{{ request.site.name }} - Machine Categories</h2>
    </div>

    <table class="table table-striped table-hover mb-5">
        <thead>
            <th>Group</th>
            <th>Available</th>
            <th>In Use</th>
            <th>Disconnected</th>
        </thead>
        {% for state in dg_states %}
            <tr>
                <td>{{ state.name }}</td>
                <td>{{ state.available }}</td>
                <td>{{ state.inuse }}</td>
                <td>{{ state.disconnected }}</td>
            </tr>
        {% endfor %}
    </table>
{% endblock content %}