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

{% block bodyclass %}analytics{% endblock %}
{% block css %}
    {{ block.super }}

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href="{{STATIC_URL}}styles/locksmith.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block meta %}
    <link id="keys-issued-yearly" href="{% url 'keys-issued-yearly' %}" rel="" type="application/json">
    <link id="keys-issued-monthly" href="{% url 'keys-issued-monthly' %}" rel="" type="application/json">
    <link id="api-list" href="{% url 'api-list' %}" rel="" type="application/json">
    <link id="apis-by-calls" href="{% url 'apis-by-calls' %}" rel="" type="application/json">
    <link id="all-calls" href="{% url 'all-calls' %}" rel="" type="application/json">
{% endblock meta %}

{% block content %}
<h2>Analytics Dashboard</h2>

<div class="row section collapsed" >
    <div class="span9">
        <h3>New Users in the Last Two Weeks</h3>
        <table class="entry-content" style="height:300px; display:block; overflow-y:hidden;" >
        <thead>
        <tr><th>Email</th><th>Description</th><th>Status</th></tr>
        </thead>
        <tbody>
        {% for user in new_users %}
            <tr><td><a href="{% url "key_analytics" user.key %}">{{user.email}}</a></td><td>{{user.usage}}</td><td>{{user.status}}</td></tr>
        {% endfor %}
        </tbody>
        </table>
        <div style="clear:both;"></div>
        <a href="#" class="expand" style="padding:10px; font-weight:bold;">Expand</a>
    </div>
    <div class="span3 sidebar">
    	<div class="module">
	        <h4>Jump To API</h4>
	        <ul class="bulleted">
	            {% for a in apis %}
	                <li><a href="{% url "api_analytics" a.name %}">{% firstof a.display_name a.name %}</a></li>
	            {% endfor %}
	        </ul>
    	</div>	
    </div>
</div>

<div class="row section collapsed" >
	<div class="span12">
	    <h3>Users Who Hit Six Months This Week</h3>
	    <table class="entry-content" style="height:300px; overflow-y:hidden; display: block;" >
	    <thead>
	    <tr><th>User</th><th>Email</th><th>Description</th><th>Status</th><th>Total Calls</th></tr>
	    </thead>
	    <tbody>
	    {% for user in six_month %}
	        <tr><td>{{user.0.name}}</td><td><a href="{% url "key_analytics" user.0.key %}">{{user.0.email}}</a></td><td>{{user.0.usage}}</td><td>{{user.0.status}}</td><td>{{ user.1|intcomma }}</td></tr>
	    {% endfor %}
	    </tbody>
	    </table>
	    <div style="clear:both;"></div>
	    <a href="#" class="expand" style="padding: 10px; font-weight:bold;">Expand</a>
	</div>
</div>
<div id="graphs" class="row section">
    <div class="span12">
        <div class="well well-small" id="page-settings">
        	<h4>Graph Settings</h4>
            <span class="pull-left labeltext">Deprecated APIs:</span>
            <span class="btn-group pull-left" data-toggle="buttons-radio">
                <button class="btn" data-setting="deprecated.apis" data-value="included"
                    >Included</button>
                <button class="btn" data-setting="deprecated.apis" data-value="excluded"
                    >Excluded</button>
            </span>
            <span class="pull-left labeltext">Internal Keys:</span>
            <span class="btn-group pull-left" data-toggle="buttons-radio">
                <button class="btn" data-setting="internal.keys" data-value="included"
                >Included</button>
                <button class="btn" data-setting="internal.keys" data-value="excluded"
                >Excluded</button>
            </span>
            <div class="clear-fix"></div>
        </div>
        <div id="calls">
            <h3> Calls By API </h3>

            <div class="well well-small">
                <span class="labeltext pull-left">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="time.period"
                            data-value="all-time">All Time</button>
                    <button class="btn"
                            data-setting="time.period"
                            data-value="year-to-date">Year to Date</button>
                    <button class="btn"
                            data-setting="time.period"
                            data-value="past-30-days">Past 30 Days</button>
                </span>
                <div class="clear"></div>
            </div>
            <button class="btn values">Show Values</button>
            <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>

            <script type="text/jquery-template" class="table-row-tmpl">
                <tr>
                    <td><button class="btn independent"></button></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>

            <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>
            <div class="clear"></div>

        </div>

        <div id="allcalls">
            <h3>All Calls Over Time </h3>

            <div class="well well-small">
                <span class="labeltext pull-left">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 class="clear"></div>
            </div>
            <button class="btn values">Show Values</button>
            <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="keys">
            <h3>Keys Issued</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>
            <button class="btn values">Show Values</button>
            <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 id="timeline" style="width: 450px;">
            </div>
            <div class="clear"></div>
        </div>
        <div id="timeperiod">
            <h3>Download Calls for Any Period:</h3>
            <form id="formcalls" action="{% url 'calls-range' %}" method="GET">
                <label for="begin">Begin: </label><input type="text" name="begin" placeholder="mm/dd/yyyy" />
                <label for="end">End: </label><input type="text" name="end" placeholder="mm/dd/yyyy" />
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block js %}
    {{ block.super }}

    <script type="text/javascript">
        var options = {{ json_options|safe }};
    
        jQuery(".collapsed").find("a.expand").on('click', function(){
            var text = 'Collapse';
            var height = '100%';

            if(jQuery(this).text() == 'Collapse'){
                text = 'Expand';
                height = '300px';
            }
            jQuery(this).siblings('table').css('height', height)
                .end()
                .toggleClass('expand').toggleClass('collapse').text(text);
            return false;
        });        


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