<div class="modal fade" id="cardsModal" aria-hidden="true" aria-labelledby="cardsModalLabel" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="cardsModalLabel">Indicators of exposure</h5>
            <div class="form-check form-switch" style="margin-left: 40px; padding-top: 8px;">
                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onclick="showEvolutionGraph()">
                <label class="form-check-label" for="flexSwitchCheckDefault">Show evolution</label>
            </div>
            <div class="form-check form-switch" id="switchLogScaleDiv" style="margin-left: 40px; padding-top: 8px;">
                <input class="form-check-input" type="checkbox" role="switch" id="switchLogScale" onclick="changeScale()">
                <label class="form-check-label" for="switchLogScale">Logarithmic scale</label>
            </div>           
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        <div class="row" style="margin-right: 15px !important; margin-left: 15px !important;">
        <script>
            function showEvolutionGraph() {
                var switch_status = document.querySelector('#flexSwitchCheckDefault').checked;

                // Limit size of chart
                all_charts = [...document.querySelectorAll('.smol-evolution-chart')];
                all_charts.forEach(e => {
                    e.style.maxHeight = '140px';
                })

                // Limit size of cards
                if (switch_status) {
                    var card_height = Math.max(...Array.from(document.getElementsByClassName('non-evolution-display')).map(element => element.offsetHeight)).toString()+'px';
                    all_cards = [...document.querySelectorAll('.smolcard')];
                    all_cards.forEach(e => {
                        e.style.maxHeight = card_height;
                        e.style.height = card_height;
                    });
                }
                else {
                    var card_height = Math.max(...Array.from(document.getElementsByClassName('evolution-display')).map(element => element.offsetHeight)).toString()+'px';
                    all_cards = [...document.querySelectorAll('.smolcard')];
                    all_cards.forEach(e => {
                        e.style.maxHeight = card_height;
                        e.style.height = card_height;
                    });
                }
                
                // Switch view between cards description and evolution charts
                var evol_graph = [...document.querySelectorAll('.evolution-display')];
                var non_evol_graph = [...document.querySelectorAll('.non-evolution-display')];
                if (switch_status) {
                    evol_graph.forEach(e => {
                        e.style.display = 'block';
                    });
                    non_evol_graph.forEach(e => {
                        e.style.display = 'none';
                    });
                }
                else {
                    evol_graph.forEach(e => {
                        e.style.display = 'none';
                    });
                    non_evol_graph.forEach(e => {
                        e.style.display = 'block';
                    });
                }
            }

            // All chart list
            var allCharts = [];
            var logScale = false;

            // Change the scaling from linear to log and vice-versa
            // Because 0-values are not supported by log scale, it changes them to 0.1
            function changeScale() {
                if (logScale) {
                    allCharts.forEach(chart => {
                        chart.data.datasets[0].data = chart.data.datasets[0].data.map(value => value === 0.1 ? 0 : value);
                        chart.options.scales.y = {
                            type: 'linear'
                        };
                        chart.update();
                    })
                    logScale = false;
                }
                else {
                    allCharts.forEach(chart => {
                        chart.data.datasets[0].data = chart.data.datasets[0].data.map(value => value === 0 ? 0.1 : value);
                        if (chart.data.datasets[0].data.includes(0.1)) {
                            chart.options.scales.y = {
                            type: 'logarithmic',
                            ticks: {
                                // We change the 0.1 value on the y-axis to 0
                                callback: (value, index) => index === 0 ? '0' : value
                                }
                            };
                            chart.options.plugins.tooltip = {
                                // Hook to artificially change the displayed value of the tooltip to 0
                                callbacks: {
                                    label: function(context) {
                                        let label = context.dataset.label;
                                        let number = context.parsed.y;
                                        return number === 0.1 ? label + ": " + "0" : label + ": " + number.toString();
                                    }
                                }
                            }
                        }
                        else {
                            chart.options.scales.y = {
                            type: 'logarithmic'
                            };
                        }
                        chart.update();
                    })
                    logScale = true;
                }
            }
        </script>