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

{% block bodyclass %}analytics{% endblock %}

{% block css %}
    {{ block.super }}
    <link href="{{STATIC_URL}}datatables/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
    <link href="{{STATIC_URL}}styles/locksmith.css" rel="stylesheet" type="text/css">
{% endblock css %}

{% block content %}
<h2>User Keys</h2>
    <table id="key-list" class="entry-content">
        <thead>
            <tr><th>Key</th>
                <th>Email</th>
                <th>Calls</th>
                <th>Latest Call</th>
                <th>Issued On</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <div style="padding-top:35px; clear:both;">
        <small>Excludes keys that have never been used.</small>
    </div>

{% endblock content %}

{% block js %}
    {{ block.super }}
    <script type="text/javascript">
        var options = {{ json_options|safe }};
    </script>

    <script type="text/javascript" src="{{STATIC_URL}}datatables/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/date-en-US.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/d3.v3.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/bar-chart.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/column-chart.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/analytics-common.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#key-list").dataTable({
                'bProcessing': true,
                'bServerSide': true,
                'sAjaxSource': '/api/analytics/data/keys/',
                'aoColumns': [
                    { 'asSorting': ['asc', 'desc'] },
                    { 'asSorting': ['asc', 'desc'] },
                    { 'asSorting': ['asc', 'desc'] },
                    { 'asSorting': ['desc', 'asc'] },
                    { 'asSorting': ['desc', 'asc'] }
                ],
                'asSorting': false,
                'aaSorting': [[2, 'desc']],
                'fnInitComplete': function(osettings, json){
                    var s_container = $('#key-list_length');
                    var select = s_container.find('select').clone(true);
                    s_container.find('label').remove().end().append('Select Entries: ').append(select);
                    
                    var f_container = $('#key-list_filter');
                    var input = f_container.find('input').attr('placeholder', 'search users').clone(true);
                    f_container.find('label').remove().end().append(input);
                }
            });
        });
    </script>
{% endblock js %}

