<style>
    .sevenDaysForecast {
        background-color: #2F2F2F;
        border-radius: 1vh;
    }

    .sevenDaysForecast .content {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 90%;
    }

    .sevenDaysForecast .chart {
        flex: 1;
    }

    .sevenDaysForecast .icons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .sevenDaysForecast .icon {
        padding: 1vmin 0.5vmin;
        font-size: 3vmin;
    }

    .sevenDaysForecast .weekend {
        border-top: 0.3vmin solid #E64C3C;
    }
</style>

<div class="sevenDaysForecast">
    <div class="content">
        <div class="chart" id="{{ chartId }}"></div>
        <div class="icons">
            {% for icon in icons %}
                <i class="wi wi-owm-day-{{ icon['icon'] }} icon {% if not icon['isWeekDay'] %}weekend{% endif %} " title="{{ icon['description'] }}" style="color: {{ icon['iconColor'] }};"></i>
            {% endfor %}
        </div>
    </div>
    <script>
        function createChart_{{ chartId | replace('-', '_') }}()
        {
            let data = [{
                x: {{ formattedDates }},
                y: {{ maxValues }},
                text: {{ maxValues }},
                mode: 'lines+text',
                textfont: {
                    family: 'sans-serif',
                    size: 18,
                    color: 'rgb(230,76,60)',
                },
                type: 'scatter',
                marker: {
                    color: 'rgba(230, 76, 60, 0.2)',
                    size: 10,
                },
                line: {
                    shape: 'spline',
                    color: 'rgba(230, 76, 60, 0.2)',
                    width: 3
                }
            },
                {
                    x: {{ formattedDates }},
                    y: {{ minValues }},
                    text: {{ minValues }},
                    mode: 'lines+text',
                    textfont: {
                        family: 'sans-serif',
                        size: 18,
                        color: 'rgba(70, 138, 221, 1))'
                    },
                    type: 'scatter',
                    marker: {
                        color: 'rgba(70, 138, 221, 0.2)',
                        size: 10,
                    },
                    line: {
                        shape: 'spline',
                        color: 'rgba(70, 138, 221, 0.2)',
                        width: 3
                    }
                }];

            let layout = {
                xaxis: {
                    showgrid: false,
                    visible: true,
                    tickformat: '%a',
                    tickvals: {{ formattedDates }},
                    tickfont: {
                        family: 'sans-serif',
                        size: 18,
                        color: 'white'
                    },
                    fixedrange: true
                },
                yaxis: {
                    showgrid: false,
                    zeroline: false,
                    visible: false,
                    fixedrange: true
                },
                paper_bgcolor: 'rgba(0,0,0,0)',
                plot_bgcolor: 'rgba(0,0,0,0)',
                showlegend: false,
                margin: {
                    b: 30,
                    l: 0,
                    r: 0,
                    t: 0
                },
                hovermode: false,
                dragmode: !isMobileDevice()
            };

            let config = {
                displayModeBar: false,
                displaylogo: false,
                responsive: true,
                locale: 'de'
            };

            Plotly.newPlot(document.getElementById('{{ chartId }}'), data, layout, config);
        }

        createChart_{{ chartId | replace('-', '_') }}();
    </script>
</div>
