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

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

{% block css %}
    {{ block.super }}

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

{% block meta %}
    <link id="calls-from-key-yearly" href="{% url 'calls-from-key-yearly' key.key %}" rel="" type="application/json">
    <link id="calls-from-key-monthly" href="{% url 'calls-from-key-monthly' key.key %}" rel="" type="application/json">
    <link id="calls-from-key-by-endpoint" href="{% url 'calls-from-key-by-endpoint' key.key %}" rel="" type="application/json">
{% endblock meta %}

{% block content %}
<div class="key-status pull-right">
    <h4 class="withTip">{{key.get_status_display}}</h4>
    <span class="tip">Issued <span>{{key.issued_on|date}}</span></span>
</div>
<h2 class="withTip">Statistics for {{key.name}}</h2>
<span class="tip">{{key.key}}</span>

<div class="span4 content">
<dl>
    <dt>Name</dd> <dd>{{key.name}}</dd>
    <dt>Email</dt> <dd>{{key.email}}</dd>
    {% with key.org_url|linkifpossible as org_url %}
    <dt>Organization Name</dd> <dd>{% if org_url %}<a href="{{org_url}}">{{key.org_name}}</a>{% else %}{{key.org_name}}{% endif %}</dd>
    {% endwith %}
    <dt>Usage</dt> <dd>{{key.usage}}</dd>

</dl>
</div>

<div class="span7 content statuses">
<h3>Publication Status</h3>
<ul class="bulleted">
    {% for ps in pub_statuses %}
    <li>{{ps.api.name}} <span class="status">{{ps.status_label}}</span></li>
    {% endfor %}
</ul>
</div>
<div id="graphs">
	<div id="calls" 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>
	</div>

	<div id="endpoints" class="row section">
	    <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" data-setting="display.mode" data-value="chart">Chart</button>
	            </span>
	            <div class="clear"></div>

	        </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>
{% endblock %}

{% 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/key-analytics.js"></script>
{% endblock js %}
