{% extends "coreprotect/base.html" %}
{% load static %}
{% block head %}
<link rel="shortcut icon" type="image/png" href="{% static 'coreprotect/img/ymca.png' %}"/>
{% endblock %}
{% block body %}
<div class="block"></div>
<div class="has-text-centered">
    <h1 class="title">CoreProtect Activity Monitor</h1>
    <hr/>
</div>
<div class="columns">
    <form id="coreprotect_form" name="coreprotect_form" class="has-text-left column is-one-fifth">
        <h4 class="title is-5 has-text-primary">
            Players
        </h4>
        <div class="field tooltip" data-tooltip="Accepts full or partial names. Separated by commas.">
            <input class="input" id="players" name="players" type="text" placeholder="Player Names" value="{{form.players}}">
        </div>

        <br/>

        <h4 class="title is-5 has-text-primary">
            Date and Time
        </h4>
        <div class="field tooltip" data-tooltip="Click to open date/time picker.">
            <p class="control">
                <input type="date" id="date_from" name="date_from" placeholder="Date From" value="{{form.date_from}}">
            </p>
        </div>
        <div class="field tooltip" data-tooltip="Click to open date/time picker.">
            <p class="control">
                <input type="date" id="date_to" name="date_to" placeholder="Date To" value="{{form.date_to}}">
            </p>
        </div>

        <br/>

        <div class="field is-grouped">
            <p class="control">
                <button class="button is-primary" id="search" type="button">Search</button>
            </p>
            <p class="control">
                <button class="button is-dark" id="clear" type="button">Clear</button>
            </p>
            <p class="control">
                <button class="button is-info" id="export" type="button">Export</button>
            </p>
        </div>
    </form>
    <div class="column is-three-fifths" id="results">

    </div>
</div>
{% endblock %}
{% block script %}
<script>

    document.getElementById("search").addEventListener("click", function() {
        elementHTML("results", 'Querying Database...<br/><progress class="progress is-primary"></progress>');

        let form = document.getElementById("coreprotect_form");
        let formData = new FormData(form);
        ajax("GET", "{% url "coreprotect_activity_query" %}?" + formURI(formData), function(status, data) {
            elementHTML("results", data);
        });
        window.history.pushState("", "", "{% url "coreprotect_activity" %}?" + formURI(formData));
    });

    document.getElementById("clear").addEventListener("click", function() {

        // Players
        document.getElementById("players").value = "";

        // Date and Time
        document.getElementById("date_from")._flatpickr.setDate();
        document.getElementById("date_to")._flatpickr.setDate();
    });

    document.getElementById("export").addEventListener("click", function() {
        exportTableToCSV("activity.csv", "results");
    });
</script>
{% endblock %}