{% extends "minecraft_manager/dashboard.html" %}
{% load static %}
{% block title %}Overview{% endblock %}
{% block head %}
    <script src="{% static 'minecraft_manager/js/chart.min.js' %}"></script>
    <script>
    $(document).ready(function() {
        $(".staff-inactive").hide();
        $("#active-only").change(function() {
            if ($(this)[0].checked) {
                $(".staff-inactive").hide();
            } else {
                $(".staff-inactive").show();
            }
        });
    });
    </script>
{% endblock %}
{% block section %}
    <div id="content">
    {% if request.user.is_staff %}
        <div class="panel panel-danger">
            <div class="panel-body">
            <h4><span class="label label-danger">Admin Area</span></h4>
            <h3>Resolved Tickets</h3>
                <label>Active Only
                    <input id="active-only" type="checkbox" checked/>
                </label>
                <div class="row">
                {% for staff in data.resolved %}
                    <div class="col-xs-6 col-md-4{% if not staff.active %} staff-inactive{% endif %}">
                    <p><span class="label label-{% if staff.active %}success{% else %}danger{% endif %}">{% if staff.active %}Active{% else %}Inactive{% endif %}</span> {{ staff.username }}: {{ staff.tickets }}</p>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
        <hr/>
    {% endif %}
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <h3>Applications: {{ data.total.application.all }}</h3>
            <p>Accepted: {{ data.total.application.accepted }}</p>
            <p>Denied: {{ data.total.application.denied }}</p>
            <br/>
            <h3>Tickets: {{ data.total.ticket.all }}</h3>
            <p>Claimed: {{ data.total.ticket.claimed }}</p>
            <p>Unclaimed: {{ data.total.ticket.unclaimed }}</p>
            <p>Resolved: {{ data.total.ticket.resolved }}</p>
            <p>Unresolved: {{ data.total.ticket.unresolved }}</p>
        </div>
        <div class="col-xs-9 col-md-6">
            <h3>Players: {{ data.total.player.all }}</h3>
            <p>Not Banned: {{ data.total.player.unbanned }}</p>
            <p>Banned: {{ data.total.player.banned }}</p>
            <br/>
            <h3>Notes: {{ data.total.note }}</h3>
            <br/>
            <h3>IPs: {{ data.total.ip }}</h3>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <h3>Average Age: {{ data.average.age }}</h3>
        </div>
        <div class="col-xs-9 col-md-6">

        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <h3>Acceptance Rate: {{ data.percentage.accepted }}%</h3>
            <h3>Application/Player Rate: {{ data.percentage.applied }}%</h3>
        </div>
        <div class="col-xs-9 col-md-6">
            <h3>Ban Rate: {{ data.percentage.banned }}%</h3>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <h3>Logins Today: {{ data.unique.day }}</h3>
            <h3>Logins Last Month: {{ data.unique.month }}</h3>
        </div>
        <div class="col-xs-9 col-md-6">
            <h3>Logins Last Week: {{ data.unique.week }}</h3>
        </div>
    </div>
    </div>
{% endblock section %}