{% extends 'main.jinja2' %}
{% block main %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Mainboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
            </div>
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1" data-bs-toggle="dropdown">
                    <svg class="bi">
                        <use xlink:href="#calendar3"></use>
                    </svg>
                    Температура
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">День</a></li>
                    <li><a class="dropdown-item" href="#">Неделя</a></li>
                    <li><a class="dropdown-item" href="#">Месяц</a></li>
                </ul>
            </div>
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1" data-bs-toggle="dropdown">
                    <svg class="bi">
                        <use xlink:href="#calendar3"></use>
                    </svg>
                    День
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">День</a></li>
                    <li><a class="dropdown-item" href="#">Неделя</a></li>
                    <li><a class="dropdown-item" href="#">Месяц</a></li>
                </ul>
            </div>
        </div>
    </div>
    <canvas class="my-4 w-100" id="chart" width="1537" height="649" style="display: block; box-sizing: border-box; height: 649px; width: 1537px;"></canvas>
    <script>
        const canvas = document.querySelector('#chart');

        const DATA_COUNT = 12;
        const labels = [];
        for (let i = 0; i < DATA_COUNT; ++i) {
            labels.push(i.toString());
        }
        const datapoints = [0, 20, 20, 60, 60, 120, 180, 120, 125, 105, 110, 170];
        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Cubic interpolation',
                    data: datapoints,
                    borderColor: 'blue',
                    fill: false,
                    tension: .4,
                },
            ],
        };

        const config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: false,
                        {#text: 'Chart.js Line Chart'#}
                    },
                },
                scales: {
                    y: {
                        stacked: true,
                        grid: {
                            display: true,
                            color: 'rgba(255, 255, 255, .2)',
                        },
                    },
                    x: {
                        stacked: true,
                        grid: {
                            display: true,
                            color: 'rgba(255, 255, 255, .2)',
                        },
                    },
                },
            },
        };

        const chart = new Chart(
            canvas.getContext('2d'),
            config,
        );
    </script>
{% endblock %}