<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/_newsflash/static/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.js" integrity="sha384-ezjq8118wdwdRMj+nX4bevEi+cDLTbhLAeFF688VK8tPDGeLUe0WoY2MZtSla72F" crossorigin="anonymous"></script>
    
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    {{ content | safe }}

    <div
        id="newsflash-notifications-container"
    >
        
    </div>

    <script>
        function getChartDimensions() {
            const dimensionsList = [...document.getElementsByClassName("newsflash-widget-container")].map((chart) => {
                const style = getComputedStyle(chart);
                return {
                    "chartID": chart.id,
                    "width": chart.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight),
                    "height": chart.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom),
                }
            });

            const dimensions = {};
            dimensionsList.forEach((dim) => {
                const chartID = dim.chartID.replace("-container", "");
                const widthKey = chartID + "-width";
                const heightKey = chartID + "-height";
                dimensions[widthKey] = dim.width;
                dimensions[heightKey] = dim.height;
            });

            return dimensions;
        }

        document.body.addEventListener("htmx:configRequest", (event) => {
            event.detail.parameters["dimensions"] = JSON.stringify(getChartDimensions());
        });
    </script>
</body>
</html>