{% extends 'arbiter/base.html'%}
{% load static %}

{% block extrastyle %}
{{block.super}}
    <script src="{% static 'js/htmx.min.js' %}"></script>
    <script src="{% static 'js/plotly.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% endblock %}
{% load humanize %}
{% block messages %}
<div id="message-container"></div>
{{ block.super }}
{% endblock %}
{% block content %}
<div class="dashboard">
    <div class="card">
        <h2 class="box-header">Management</h2>
        <hr class="box-divider">
        <div class="management-box">
            <div class="status-box">
                <h3>Status:</h3>
                <hr class="box-divider">
                <p><code>cgroup-warden</code> instances up: {{ agents|length }}</p>
                <p>Last-Evaluated: {{last_evaluated | naturaltime}} </p>
            </div>

            <div class="commands-box">
                <div class="commands-list">
                    <form>
                        {% csrf_token %}
                        <h3>Run Arbiter Evaluation Loop:</h3>
                        <i class="helptext">
                            Use to run a single loop of evaluating arbiter's polcies. Useful when testing for one off runs.
                        </i>
                        <input type="submit" value="Evaluate"
                            hx-post="{% url 'arbiter:evaluate' %}" hx-swap="afterbegin"
                            hx-target=".messagelist">
                    </form>
                    <hr class="box-divider">
                    <form>
                        {% csrf_token %}
                        <h3>Clean Violation History:</h3>
                        <i class="helptext">
                            Use to delete violation/event history before the specified time. 
                            Useful to clean state. Note the next evalutaion loop will fix any limits that are affected by this.
                        </i>
                        <div id="before-input">
                            <h4>Before:</h4><input type="datetime-local" name="before">
                        </div>
                        <input type="submit" value="Clean"
                            hx-post="{% url 'arbiter:clean' %}" hx-swap="afterbegin"
                            hx-include="[name='before']"
                            hx-target=".messagelist">
                    </form>
                </div>
            </div>

            <div class="apply-box">
                <form>
                    {% csrf_token %}
                    <h3>Apply Property</h3>
                    <hr class="box-divider">
                    <i class="helptext">
                        *Note: This limit is seen and often overidden by arbiter's evaluation loop. 
                        Use to manually change limits that arbiter is not watching (such as whitelisted users) 
                        or when a policy or the evaluation loop is no longer active.
                    </i>
                    <div class="apply-options">
                        <h3>Host</h3>
                        <select name="apply-host">
                            <!-- <option value="all">All</option> -->
                            {% for host in agents %}
                            <option value="{{host}}">{{host}}</option>
                            {% endfor %}
                        </select>

                        <h3>Username</h3>
                        <input type="text" name="username" placeholder="">

                        <h3>Property</h3>
                        <select name="prop">
                            {% for name, property in limits.items %}
                                <option value="{{ property }}">{{name}}</option>
                            {% endfor %}
                        </select>
                        <h3>Value</h3>
                        <input type="text" name="value" placeholder="0">
                        <input type="button" value="Apply Limit" 
                            hx-post="{% url 'arbiter:apply' %}"
                            hx-swap="afterbegin" hx-target=".messagelist"
                            hx-include="[name='apply-host'],[name='username'],[name='prop'],[name='value']">
                        </div>
                </form>
            </div>
        </div>
    </div>
<div class="card">
    <h2 class="box-header">Recent Violations</h2>
    <hr class="box-divider">
    <div class="notification-box">
        <table class="notification-table">
            <thead>
                <tr>
                    <th>
                        <h4>Violation</h4>
                    </th>
                    <th>
                        <h4>Time</h4>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for violation in violations %}
                <tr>
                    <td>
                        <a href="{% url 'arbiter:change-violation' violation.id %}">
                            <p>{{violation}}</p>
                        </a>
                    </td>
                    <td>
                        <p>{{violation.timestamp | naturaltime}}</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="card">
    <h2 class="box-header">View Usage</h2>
    <hr class="box-divider">
    <div class="usage-box">
        <form>
            <div class="usage-options">
                <div class="options-column">
                    <div class="label-input-box">
                        <h3>Host:</h3>
                        <select name="host" id="usage-host">
                            <!-- <option value="all">All</option> -->
                            {% for host in agents %}
                            <option value="{{host}}">{{host}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="label-input-box">
                        <h3>Username:</h3>
                        <input type="text" name="username" placeholder="" id="username">
                    </div>
                </div>
                <div class="options-column">
                    <div class="label-input-box">
                        <h3>Start Time:</h3>
                        <input type="datetime-local" name="start-time">
                    </div>
                    <div class="label-input-box">
                        <h3>End Time:</h3>
                        <input type="datetime-local" name="end-time">
                    </div>

                </div>
                <div class="options-column">
                    <div class="label-input-box">
                        <h3>Step Size:</h3>
                        <input type="number" name="step-value" value="60">
                        <select name="step-unit">
                            <option value="s">Seconds</option>
                            <option value="m">Minutes</option>
                        </select>
                    </div>
                </div>
                <div class="options-column">
                    <input type="button" value="View Memory" hx-get="{% url 'arbiter:user-proc-memory-graph' %}"
                        hx-swap="innerHTML" hx-target="#chart-div"
                        hx-include="[id='usage-user-input'], [id='usage-host'], [id='username'], [name='step-value'], [name='step-unit'], [name='end-time'], [name='start-time']">
                    <input type="button" value="View CPU" hx-get="{% url 'arbiter:user-proc-cpu-graph' %}" hx-swap="innerHTML"
                        hx-target="#chart-div"
                        hx-include="[id='usage-user-input'], [id='username'], [id='usage-host'], [name='step-value'], [name='step-unit'], [name='end-time'], [name='start-time']">
                </div>
            </div>
        </form>

        <div id="chart-div"></div>
    </div>
</div>
</div>
{% endblock %}