<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>Main</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        @media (prefers-color-scheme: dark) {
          html {
            background-color: #282a36
          }
        }
    </style>
    <script type="module" src="/wc-codemirror/index.min.js"></script>
    <script type="module" src="/wc-codemirror/mode/xml/xml.js"></script>
    <script type="module" src="/wc-codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type="module" src="/wc-easy-email/assets/main-DsYWhzIG.js"></script>
    <link rel="modulepreload" href="/wc-easy-email/assets/modulepreload-polyfill-B5Qt9EMX.js">
    <link rel="stylesheet" href="/wc-easy-email/assets/easyemail-j0d36Hpw.css">
</head>

<body>
    <pre id="elm"></pre>

    <script src="/elm.min.js"></script>
    <script>
        var app = Elm.Main.init({
            node: document.getElementById("elm"), flags: {
                now: Date.now()
                , windowSize: {
                    width: window.innerWidth,
                    height: window.innerHeight
                }
                , preferences: JSON.parse(window.localStorage.getItem("preferences"))
                , prefersDark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
                , settings: {"disableRegister":false}
            }
        });
        app.ports.savePreferences.subscribe(preferences => {
            console.log({ preferences });
            window.localStorage.setItem("preferences", JSON.stringify(preferences));
        });

        app.ports.copy.subscribe(toCopy => {
            if (navigator.clipboard) {
                navigator.clipboard
                    .writeText(toCopy)
                    .finally(() => app.ports.copied.send(""))
            } else {
                toCopy.select();
                document.execCommand('copy');
                app.ports.copied.send("")
            }
        })

        window.matchMedia('(prefers-color-scheme: dark)')
            .addEventListener('change',({ matches }) => {
                if (matches) {
                    app.ports.prefersDark.send(true);
                } else {
                    app.ports.prefersDark.send(false);
                }
            })

    </script>

</body>

</html>
