{% load custom_tags_and_filters %}
<form method="POST" action="{% url 'usage_data_history' tool_id %}" id="usage_data_form" class="form-inline" role="form" style="margin: 15px 0" target="_blank">
	{% csrf_token %}
	<input type="hidden" name="csv" id="hidden_data_csv"/>
	<input type="hidden" name="start" id="hidden_data_start"/>
	<input type="hidden" name="end" id="hidden_data_end"/>
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-8">
                <div class="row" style="margin-bottom: 15px">
                    <div class="container">
                        <div class="form-group extra-side-padding">
                            <label for="data_history_start_date">From</label>
                        </div>
                        <div class="datetimepicker-container form-group extra-side-padding">
                            <input type="text" id="data_history_start_date" name="data_history_start_date" class="form-control text-center small-input" placeholder="Start date" value="{{ data_history_start|input_date_format }}">
                        </div>
                        <div class="form-group extra-side-padding">
                            <label for="data_history_end_date">to</label>
                        </div>
                        <div class="datetimepicker-container form-group extra-side-padding">
                            <input type="text" id="data_history_end_date" name="data_history_end_date" class="form-control text-center small-input" placeholder="End date" value="{{ data_history_end|input_date_format }}">
                        </div>
                        <div class="form-group extra-side-padding">
                            <label for="data_history_last">or last</label>
                        </div>
                        <div class="form-group extra-side-padding">
                            <select id="data_history_last" name="data_history_last" class="form-control small-input" onchange="if (this.value !== '') {$('#data_history_start_date').val('');$('#data_history_end_date').val('')}">
                                <option value=""></option>
                                <option value="10" {% if data_history_last == '10' %}selected{% endif %}>10</option>
                                <option value="25" {% if data_history_last == '25' %}selected{% endif %}>25</option>
                                <option value="50" {% if data_history_last == '50' %}selected{% endif %}>50</option>
                                <option value="100" {% if data_history_last == '100' %}selected{% endif %}>100</option>
                            </select>
                        </div>
                        <div class="form-group extra-side-padding">
                            <label>records</label>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-bottom: 15px">
                    <div class="container">
                        <div class="form-group extra-side-padding">
                            <label for="user_search">Filter by user:</label>
                        </div>
                        <div class="form-group extra-side-padding">
                            <input type="text" class="form-control" id="user_search" placeholder="Search for a user" {% if data_history_user %}style="display:none"{% endif %} required>
                            <input type="button" id="chosen_user" class="btn btn-default" {% if not data_history_user %}style="display:none"{% endif %} onclick="clear_selected_user()" value="{{ data_history_user }}">
                            <input type="hidden" id="data_history_user_id" name="data_history_user_id" value="{{ data_history_user.id }}">
                        </div>
                        <div class="checkbox">
                            <label style="padding-left: 20px"><input type="checkbox" name="show_project_info" {% if show_project_info %}checked{% endif %}> Show project information</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group pull-right extra-side-padding">
                    {% button type="save" submit=False value="Update" onclick="load_usage_data('"|concat:tool_id|concat:"');" icon="glyphicon-refresh" %}
                </div>
            </div>
        </div>

    </div>
</form>
{% if run_data_table.rows or pre_run_data_table.rows %}
<ul class="nav nav-tabs" id="usage-tabs">
    {% if pre_run_data_table.rows  %}
    <li class="{% if pre_run_data_table.rows %}active{% endif %}">
        <a data-toggle="tab" href="#pre-run-data-tab">Pre-Run Data</a>
    </li>
    {% endif %}
    {% if run_data_table.rows  %}
    <li class="{% if not pre_run_data_table.rows %}active{% endif %}">
        <a data-toggle="tab" href="#run-data-tab">Run Data</a>
    </li>
    {% endif %}
</ul>
<div class="tab-content" style="margin-bottom: 0;">
    <div class="tab-pane {% if pre_run_data_table.rows %}active{% endif %}" id="pre-run-data-tab">
        <div class="col-md-12">
            <div class="form-group pull-right extra-side-padding" style="padding-top: 10px">
                {% button type="export" value="Export" onclick="load_usage_data('"|concat:tool_id|concat:"', 'pre-run');" %}
            </div>
        </div>
        <div class="panel-body">
            {% if pre_run_data_table.rows %}
                <table class="table table-bordered table-condensed" style="margin-top: 10px">
                    <thead>
                        <tr>
                            {% for header in pre_run_data_table.flat_headers %}
                                <th>{{ header }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in pre_run_data_table.flat_rows %}
                            <tr>
                                {% for item in row %}
                                    <td>{% if item|class_name == "list" %}{{ item|join:", " }}{% else %}{{ item|default_if_none:"" }}{% endif %}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <span class="italic">No pre-run data was found between these dates</span>
            {% endif %}
        </div>
    </div>
    <div class="tab-pane {% if not pre_run_data_table.rows %}active{% endif %}" id="run-data-tab">
        <div class="col-md-12">
            <div class="form-group pull-right extra-side-padding" style="padding-top: 10px">
                {% button type="export" value="Export" onclick="load_usage_data('"|concat:tool_id|concat:"', 'run');" %}
            </div>
        </div>
        <div class="panel-body">
            {% if run_data_table.rows %}
                <table class="table table-bordered table-condensed" style="margin-top: 10px">
                    <thead>
                        <tr>
                            {% for header in run_data_table.flat_headers %}
                                <th>{{ header }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in run_data_table.flat_rows %}
                            <tr>
                                {% for item in row %}
                                    <td>{% if item|class_name == "list" %}{{ item|join:", " }}{% else %}{{ item|default_if_none:"" }}{% endif %}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <span class="italic">No run data was found between these dates</span>
            {% endif %}
        </div>
    </div>
</div>
{% else %}
    <span class="italic">No usage data was found between these dates</span>
{% endif %}


<script>
    function clear_selected_user()
    {
        $("#chosen_user").val('').hide();
        $("#user_search").typeahead('val', '').show().focus();
        $("#data_history_user_id").val('');
    }
    function select_user(jquery_event, search_selection, dataset_name)
    {
        $('#user_search').hide();
        $('#chosen_user').val(search_selection.name).show();
        $('#data_history_user_id').val(search_selection.id);
    }
    $('#user_search').autocomplete('users', select_user, {{ users|json_search_base }});
    $('#data_history_start_date').datetimepicker({format: '{{ date_input_js_format }}'}).on('dp.change', function (e) { $('#data_history_last').val('') });
    $('#data_history_end_date').datetimepicker({format: '{{ date_input_js_format }}'}).on('dp.change', function (e) { $('#data_history_last').val('') });
</script>