<div class="row">
    {% if title is not empty %}
        <div class="col-12">
            <h1 class="text-center mb-5">{{ title }}</h1>
        </div>
    {% endif %}
    <div class="col-12">
        {% if (mode == "both" and results is not empty and latest is not empty) or (mode == "latest" and latest is not empty) or(mode == "history" and results is not empty) %}
            {% if mode == 'both' %}
            <ul class="nav nav-tabs" id="check-result-tab-{{ random }}" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="check-result-tab-latest-{{random}}-tab" data-toggle="tab" href="#check-result-tab-latest-{{random}}" role="tab" aria-controls="check-result-tab-latest-{{random}}" aria-selected="true"><i class="fas fa-clock"></i>&nbsp;Aktuell</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="check-result-tab-history-{{random}}-tab" data-toggle="tab" href="#check-result-tab-history-{{random}}" role="tab" aria-controls="check-result-tab-history-{{random}}" aria-selected="false"><i class="fas fa-history"></i>&nbsp;Verlauf</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active p-2" id="check-result-tab-latest-{{random}}" role="tabpanel" aria-labelledby="check-result-tab-latest-{{random}}-tab">
            {% endif %}
            {% if mode == 'both' or mode == 'latest' %}
                <div>
                    <canvas id="check-result-tab-latest-{{random}}-chart" class="chart_type_{{charttype_latest}}"></canvas>
                </div>
            {% endif %}
            {% if mode == 'both' %}
                </div>
                <div class="tab-pane fade p-2" id="check-result-tab-history-{{random}}" role="tabpanel" aria-labelledby="check-result-tab-history-{{random}}-tab">
            {% endif %}
            {% if mode == 'both' or mode == 'history' %}
                <div>
                    <canvas id="check-result-tab-history-{{random}}-chart"></canvas>
                </div>
            {% endif %}
            {% if mode == 'both' %}
                </div>
            </div>
            {% endif %}
        {% else %}
            <div class="alert alert-info" role="alert">
                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                <p>
                    Sie haben noch keine gespeicherten Check-Ergebnisse.
                </p>
            </div>
        {% endif  %}
    </div>
</div>
<script>
    jQuery(document).ready(function() {
        {% if mode == 'both' or mode == 'latest' %}
        var delayed{{random}}latest;
        var chartNow{{random}} = new Chart(
            document.getElementById('check-result-tab-latest-{{random}}-chart'),
                {% if charttype_latest == 'bar' %}
                {
                    type: 'bar',
                    data: {
                        labels: [{% for l in latest %}"{{ l['label'] }}"{% if not loop.last %},{% endif %}{% endfor %}],
                        datasets: [{
                            label: '',
                            backgroundColor: [{% for l in latest %}"{{ l['color'] }}"{% if not loop.last %},{% endif %}{% endfor %}],
                            borderColor: 'rgb(255, 255, 255)',
                            data: [{% for l in latest %}"{{ l ['data_display'] }}"{% if not loop.last %},{% endif %}{% endfor %}],
                            maxBarThickness: 80,
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                min: 0,
                                max: {{max_value}}
                            }
                        },
                        plugins: {
                            legend: {
                                display: false,
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return ' ' + context.formattedValue + ' %';
                                    }
                                }
                            }
                        },
                        responsive: true,
                        animation: {
                            onComplete: () => {
                                delayed{{random}}latest = true;
                            },
                            delay: (context) => {
                                let delay = 0;
                                if (context.type === 'data' && context.mode === 'default' && !delayed{{random}}latest) {
                                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                                }
                                return delay;
                            },
                        },
                    }
                }
                {% elseif charttype_latest == 'radar' %}
                {
                    type: 'radar',
                    data:{
                        labels: [{% for l in latest %}"{{ l['label'] }}"{% if not loop.last %},{% endif %}{% endfor %}],
                        datasets:[{
                            label: '',
                            backgroundColor: '{{radar_backgroundColor}}',
                            borderColor: '{{radar_borderColor}}',
                            data: [{% for l in latest %}"{{ l ['data_display'] }}"{% if not loop.last %},{% endif %}{% endfor %}],
                        }]
                    },
                    options: {
                        scales: {
                            r: {
                                min: 0,
                                max: {{max_value}}
                            }
                        },
                        plugins: {
                            legend: {
                                display: false,
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return ' ' + context.formattedValue + ' %';
                                    }
                                }
                            }
                        },
                        responsive: true,
                    }
                }
                {% endif %}
                
            );
        {% endif %}

        {% if mode == 'both' or mode == 'history' %}
        var chartHistory{{random}} = new Chart(
                            document.getElementById('check-result-tab-history-{{random}}-chart'),
                            {
                                type: 'line',
                                data: {
                                    labels: [{% for time, data in results %}"{{ time|date('d.m.Y H:i') }} Uhr"{% if not loop.last %},{% endif %}{% endfor%}],
                                    datasets: [
                                        {% for checkparam, data in results|first %}
                                            {
                                                label: "{{ data['label'] }}",
                                                data: [{% for time, data in results %}{{ results[time][checkparam]['data'] }}{% if not loop.last %},{% endif %}{% endfor%}],
                                                backgroundColor: "{{ data['color'] }}",
                                                borderColor: "{{ data['color'] }}",
                                                spanGaps: true,
                                            }
                                            {% if not loop.last %},{% endif %}
                                        {% endfor %}
                                    ]
                                },
                                options: {
                                    scales: {
                                        y: {
                                            min: 0,
                                            max: {{max_value}}
                                        }
                                    },
                                    responsive: true,
                                    plugins: {
                                        tooltip: {
                                            callbacks: {
                                                label: function(context) {
                                                    return ' ' + context.dataset.label + ': ' + context.formattedValue + ' %';
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        );
            {% endif %}
    });
</script>