<!DOCTYPE html>
<html lang="en" data-bs-theme="light">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WMA Brochure Search</title>
    <base href="/hgm/hgmsearch/" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

    <!-- Load Calcite Design System -->
    <!-- <script
    type="module"
    src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script> -->
    <!-- Load the JavaScript Maps SDK core API -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <link rel="stylesheet" href="_content/Components/css/app.css" />


    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            /*background-color: #FFFFFF !important;*/
            /*color: #e0e0e0 !important;*/
        }

        #app {
            /*background-color: #121212;*/
            /* color: #e0e0e0; */
            min-height: 100vh;
        }

        /* a {
            color: #8ab4f8;
        } */
    </style>
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <!--<script src="_content/Components/lib/bootstrap/js/bootstrap.bundle.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Load the JavaScript Maps SDK Map components or other component packages -->
    <!-- <script
    type="module"
    src="https://js.arcgis.com/4.33/map-components/"></script> -->

    <script type="module" src="js/mapModule.js">
    </script>

    <script type="module" src="js/helpers.js">
    </script>

    <script>
        function downloadFile(base64Data, contentType, fileName) {
            const blob = new Blob(
                [Uint8Array.from(atob(base64Data), (c) => c.charCodeAt(0))],
                { type: contentType },
            );
            const url = URL.createObjectURL(blob);

            // Create a temporary anchor element
            const a = document.createElement("a");
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);

            // Trigger download and clean up
            a.click();
            URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }

        function downloadFileFromBase64(filename, base64) {
            const link = document.createElement('a');
            link.href = 'data:application/zip;base64,' + base64;
            link.download = filename;
            link.click();
        }
    </script>

</body>

</html>
