{% extends "base.html" %}
{% block title %}Profile{% endblock title %}

{% block content %}

<h2>Profile</h2>
<dl>
    <dt>Email:</dt><dd>{{key.email}}</dd>
    <dt>Key:</dt><dd>{{key.key}}</dd>
    <dt>Name:</dt><dd>{{key.name|default:"none"}}</dd>
    <dt>Organization Name:</dt><dd>{{key.org_name|default:"none"}}</dd>
    <dt>Organization URL:</dt><dd>{{key.org_url|default:"none"}}</dd>
    <dt>Usage:</dt><dd>{{key.usage|default:"none"}}</dd>
    <dt>Signup Time:</dt><dd>{{key.issued_on}}</dd>
</dl>

<h3>Your Key's Statistics</h3>
<div id="timeline" style="height:500px;">
</div>

<div id="endpoints" style="width: 800px;">
</div>


<h3> Edit Password </h3>

{% if password_is_key %}
<p class="tip"> Currently your password is set to the value of your API key, you will most likely want to change it.</p>
{% endif %}

<form method="post" action=".">
    <ul>
        {{ form.as_ul }}
    <li>
    <button id="user_submit" type="submit" value="Edit Password" name="commit">
        <span>Edit Password</span>
    </button>
    </li>
    </ul>
</form>

{% endblock content %}

{% block js %}
    <script src="{{STATIC_URL}}scripts/highcharts.js" type="text/javascript"></script>
    <script>
    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'endpoints',
        defaultSeriesType: 'bar'
    },
    title: {
        text: 'API Calls by Method'
    },
    xAxis: {
        categories: {{endpoints|safe}},
        title: {
            text: null
        },
        labels: {enabled: false}
    },
    yAxis: { min: 0, title: { text: null },
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+ this.y;
        }
    },
    legend: { enabled: false },
    credits: { enabled: false },
    series: [{
        data: {{endpoint_calls|safe}}
    }]
    });


    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'timeline',
    },
    title: { text: 'API Calls' },
    xAxis: {
        type: 'datetime',
        title: {
            text: null
        }
    },
    yAxis: { title: { text: null }, min: 0,
        max: 10000,
        showFirstLabel: false
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d', this.x) + ': ' + this.y + ' calls';
        }
    },
    legend: { enabled: false },
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                [0, 'rgba(0,0,255,255)'],
                [1, 'rgba(0,0,0,0)']
                ]
            },
            lineWidth: 1,
            marker: {
                enabled: false,
                states: {
                hover: {
                    enabled: true,
                    radius: 3
                }
                }
            },
            shadow: false,
            states: {
                hover: {
                lineWidth: 1
                }
            }
        }
    },
    credits: {enabled: false},
    series: [{
        type: 'area',
        name: 'calls',
        data: [
        {% for o in timeline %}
        [{{o.date|jsdate}}, {{o.calls}}]
        {% if not forloop.last %} , {% endif %}
        {% endfor %}
        ]
    }]
    });
    </script>
{% endblock js %}


