{% extends "locksmith/base.html" %}
{% load humanize %}
{% load charthelpers %}

{% 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 meta %}
    <link id="calls-to-api-yearly" href="{% url 'calls-to-api-yearly' api.name %}" rel="" type="application/json">
    <link id="calls-to-api-monthly" href="{% url 'calls-to-api-monthly' api.name %}" rel="" type="application/json">
    <link id="callers-of-api" href="{% url 'callers-of-api' api.name %}" rel="" type="application/json">
    <link id="calls-to-api-by-endpoint" href="{% url 'calls-to-api-by-endpoint' api.name %}" rel="" type="application/json">
{% endblock meta %}

{% block content %}
<h2>Statistics for {{api.name}}</h2>

<div id="graphs" class="row section">
    <div id="api-calls-container">
    	<h3> Calls Over Time </h3>

        <div class="well well-small analytics-chart-buttons">
            <span class="pull-left labeltext">Switch View:</span>
            <span class="pull-left btn-group" data-toggle="buttons-radio">
                <button class="btn" data-setting="display.mode" data-value="table">Table</button>
                <button class="btn" data-setting="display.mode" data-value="chart">Chart</button>
            </span>
            <span class="pull-left labeltext">Change Time Period:</span>
            <span class="pull-left btn-group" data-toggle="buttons-radio">
                <button class="btn"
                        data-setting="chart.interval"
                        data-value="monthly">Monthly</button>
                <button class="btn api-calls-internal-btn"
                        data-setting="chart.interval"
                        data-value="yearly">Yearly</button>
            </span>
        </div>
        <div class="clear"></div>
        <div class="loading-container" style="display: none;">
            <div class="loading"></div>
            <div class="loading-text">Loading...</div>
        </div>
        <div class="message" style="display: none;"><span class="message-text"></span></div>
        <figure class="analytics-chart pull-right span9"><figcaption></figcaption></figure>
        <table class="table table-striped table-bordered analytics-table pull-right span9">
            <caption></caption>
            <thead>
                <tr><th class="independent"></th>
                    <th class="dependent"></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script type="text/jquery-template" class="yearly-table-row-tmpl">
            <tr>
                <td><button class="btn independent"></button></td>
                <td class="dependent"></td>
            </tr>
        </script>
        <script type="text/jquery-template" class="monthly-table-row-tmpl">
            <tr>
                <td class="independent"></td>
                <td class="dependent"></td>
            </tr>
        </script>
        <script type="text/jquery-template" class="table-total-row-tmpl">
            <tr class="total"> <td>Total:</td> <td class="dependent"></td> </tr>
        </script>
        <div class="clear"></div>

    </div>
    <div id="endpoint-calls-container">
    	<h3>Calls by Endpoint</h3>
        <div class="well well-small analytics-chart-buttons">
            <span class="pull-left labeltext">Switch View:</span>
            <span class="pull-left btn-group" data-toggle="buttons-radio">
                <button class="btn" data-setting="display.mode" data-value="table">Table</button>
                <button class="btn active" data-setting="display.mode" data-value="chart">Chart</button>
            </span>
        </div>
        <div class="clear"></div>
        <div class="loading-container" style="display: none;">
            <div class="loading"></div>
            <div class="loading-text">Loading...</div>
        </div>
        <div class="message" style="display: none;"><span class="message-text"></span></div>
        <figure class="analytics-chart pull-right span9"><figcaption></figcaption></figure>
        <table class="table table-striped table-bordered analytics-table pull-right span9">
            <caption></caption>
            <thead>
                <tr><th class="independent"></th>
                    <th class="dependent"></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script type="text/jquery-template" class="table-row-tmpl">
            <tr>
                <td class="independent"></td>
                <td class="dependent"></td>
            </tr>
        </script>
        <script type="text/jquery-template" class="table-total-row-tmpl">
            <tr class="total"> <td>Total:</td> <td class="dependent"></td> </tr>
        </script>
    </div>
</div>
<div id="users">
    <table class="entry-content" id="key-list">
        <thead>
            <tr><th>User</th><th>Key</th><th>Calls</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</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/analytics-common.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/analytics-charts.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/api-analytics.js"></script>
{% endblock js %}

