{% extends "bootstrap/base.html" %}
{% block title %}Key Creation{% endblock %}

{% block navbar %}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="{{ url_for('dashboard') }}">Dashboard</a>
    </div>
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav" style="float: right">
      <li class="active"><a href="#">Welcome {{ current_user.username }}!</a></li>
      <li><a href="{{ url_for('logout') }}">Logout</a></li>
    </ul>
  </div>
</nav>
{% endblock navbar %}}

{% block content %}
{# LOGO #}
<div class="container" style="margin-top: 50px">

    {# Display logo #}
    <div style="margin-bottom: 50px">
        <img
                src="{{ url_for('static', filename=resources.LOGO) }}"
                class="center-block img-responsive mx-auto d-block"
                alt="Logo"
                width="100"
                height="100"
        >
    </div>

</div>

{# Key creation #}
<div class="container">
    <div class="text-center">
        <h3>Key Creation</h3>
    </div>

    <div class="col-lg-3">
    </div>
    <div class="col-lg-6">

    {# If the error value is set, display the error in red text #}
    {% if error %}
        <div class="alert alert-danger">
            {{ error }}
        </div>
    {% endif %}

    {# If the message value is set, display the message in green text #}
    {% if message %}
        <div class="alert alert-success">
            {{ message }}
        </div>
    {% endif %}

    {# Form which takes in Admin Username, Admin Password, and the amount of keys to create. #}
    <form action="{{ url_for('dashboard') }}" method="post">
        {# Key count input #}
        <div class="form-group">
            <label for="key_count">Generate keys</label>
            <input type="number" class="form-control" name="key_count" placeholder="Enter number of keys...">
            <small class="form-text text-muted">Number of keys to create.</small>
        </div>
        
        {# Submit button #}
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Generate Keys</button>
        </div>
    </form>

    {# If the keys value is set, create a list for each key in keys #}
    {% if keys %}
        <div class="alert alert-success">
            <ul>
                {% for key in keys %}
                    <li>{{ key }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    </div>
    <div class="col-lg-3">
    </div>
    </div>
</div>

{# Activity graphs #}
<div class="container">

    <div class="text-center">
        <h3>Activity</h3>
    </div>

    <div class="col-lg-3">
    </div>

    <div class="col-lg-6">

    <canvas id="sessions_graph" width="400" height="400"></canvas>
    <canvas id="play_time_graph" width="400" height="400"></canvas>
    <canvas id="zone_play_time_graph" width="400" height="400"></canvas>

    </div>

    <div class="col-lg-3">
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
// Make a get request to the server to load the activity data
$.get("{{ url_for('load_activities') }}", function(data) {

});

// Make a get request to the server to get the activity data for "sessions"
$.get("{{ url_for('activity_data', name='sessions') }}", function(data) {
    // Load data as a json object
    data = JSON.parse(data);
    var ctx = document.getElementById('sessions_graph').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: data.datasets
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});

// Make a get request to the server to get the activity data for "play_time"
$.get("{{ url_for('activity_data', name='play_time') }}", function(data) {
    // Load data as a json object
    data = JSON.parse(data);
    var ctx = document.getElementById('play_time_graph').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: data.datasets
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});

// Make a get request to the server to get the activity data for "zone_play_time"
$.get("{{ url_for('activity_data', name='zone_play_time') }}", function(data) {
    // Load data as a json object
    data = JSON.parse(data);
    var ctx = document.getElementById('zone_play_time_graph').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: data.datasets
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
{% endblock scripts %}}