@using LANCommander.Services;
@using LANCommander.Models;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - LANCommander</title>
    <base href="~/" />

    @switch (SettingService.GetSettings().Theme)
    {
        case LANCommanderTheme.Light:
            <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
            break;

        case LANCommanderTheme.Dark:
            <link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
            break;
    }

    <link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
    <section class="layout ant-layout">
        <main class="ant-layout-content" style="padding: 24px; min-height: 100vh;">
            @RenderBody()
        </main>
    </section>

    <script src="~/lib/antv/g2plot/dist/g2plot.js"></script>
    <script src="~/_content/AntDesign/js/ant-design-blazor.js"></script>
    <script src="~/_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
    <script src="~/js/site.js"></script>

    <script>
        var checkboxes = document.querySelectorAll('.ant-checkbox-input');

        function handleCheckboxChange(event) {
            var checkbox = event.target;
            var parentWrapper = checkbox.closest('.ant-checkbox-wrapper');

            if (checkbox.checked) {
                parentWrapper.classList.add('ant-checkbox-wrapper-checked');
                parentWrapper.querySelector('.ant-checkbox').classList.add('ant-checkbox-checked');
            } else {
                parentWrapper.classList.remove('ant-checkbox-wrapper-checked');
                parentWrapper.querySelector('.ant-checkbox').classList.remove('ant-checkbox-checked');
            }
        }

        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', handleCheckboxChange);
        });
    </script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
