{% extends "base.html" %}
{% block content %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <h1><i class="{{ icon|safe }}"></i> {{ title }}</h1>
    <div class="row" style="text-align:center;font-size:2rem;">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <i class="{{ placesicon }}"></i> {{ placescount }} {{ placestext }}
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <i class="{{ sessionsicon }}"></i> {{ sessionscount }} {{ sessionstext }}
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <i class="{{ sightingsicon }}"></i> {{ sightingscount }} {{ sightingstext }}
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <i class="{{ observersicon }}"></i> {{ observerscount }} {{ observerstext }}
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="text-align:center;font-size:1.5rem;padding-top:10px;">
{#        <div class="col-lg-12">#}
{#            <div class="panel panel-default panel-primary">#}
{#                <div class="panel-heading">#}
{#                    <h3 class="panel-title">{{ month_contrib_title }}</h3>#}
{#                </div>#}
{#                <div class="panel-body">#}
{#                    <canvas id="monthcontrib"></canvas>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="panel panel-default panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ month_contrib_title }}</h3>
                </div>
                <div class="panel-body">
                    <canvas id="monthcontrib"></canvas>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="panel panel-default panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ year_contrib_title }}</h3>
                </div>
                <div class="panel-body">
                    <canvas id="yearcontrib"></canvas>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="panel panel-default panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ contact_contrib_title }}</h3>
                </div>
                <div class="panel-body">
                    <canvas id="contactcontrib"></canvas>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="panel panel-default panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ territory_contrib_title }}</h3>
                </div>
                <div class="panel-body">
                    <canvas id="territorycontrib"></canvas>
                </div>
            </div>
        </div>
    </div>
    <script>
        var ctx = document.getElementById('yearcontrib').getContext('2d');
        var yearcontrib = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                    labels: {{ list_year|safe }},
                    datasets: [{
                        label: "{{ sight_date_label|safe }}",
                        backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        borderColor: 'rgb(255, 99, 132)',
                        data: {{ year_sights }},
                    },
                    ]
                },
                // Configuration options go here
            })
        ;

        var ctx = document.getElementById('monthcontrib').getContext('2d');
        var monthcontrib = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: {{ list_month|safe }},
                datasets: [{
                    label: "{{ create_date_label|safe }}",
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: {{ month_contrib }}
                }, {
                    label: "{{ sight_date_label|safe }}",
                    backgroundColor: 'rgba(46, 138, 138, 0.5)',
                    borderColor: 'rgb(46, 138, 138)',
                    data: {{ month_sights }},
                },
                ]
            },

            // Configuration options go here

        });

        var ctx = document.getElementById('contactcontrib').getContext('2d');
        var contactcontrib = new Chart(ctx, {
            // The type of chart we want to create
            type: 'bar',

            // The data for our dataset
            data: {
                labels: {{ list_contact|safe }},
                datasets: [{
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: {{ contact_contrib }},
                }]
            },

            // Configuration options go here
            options: {
                legend: [{
                    display: false,
                }],
            }
        });

        var ctx = document.getElementById('territorycontrib').getContext('2d');
        var territorycontrib = new Chart(ctx, {
            // The type of chart we want to create
            type: 'bar',

            // The data for our dataset
            data: {
                labels: {{ list_territory|safe }},
                datasets: [{
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: {{ territory_contrib }},
                }]
            },
            // Configuration options go here
            options: {
                legend: [{
                    display: false,
                }],
            }
        });
    </script>
{% endblock %}