<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <meta
            http-equiv="content-security-policy"
            content="default-src 'self' blob:; img-src * data:; media-src *; font-src *; style-src 'unsafe-inline' 'self' blob: *; script-src 'self' 'unsafe-inline' blob: *; object-src 'self' blob: *; upgrade-insecure-requests; connect-src * localhost; frame-src 'self' blob: data: *"
        />

        <link rel="icon" href="/public/favicon.svg" />

        <link rel="stylesheet" href="/css/style.css" />

        <script src="/js/loader.js"></script>
        <script defer async src="/js/atto.js"></script>

        <script>
            globalThis.ns_verbose = false;
            globalThis.ns_config = {
                root: "/js/",
                verbose: globalThis.ns_verbose,
                version: "cache-breaker-{{ random_cache_breaker }}",
            };

            globalThis._app_base = {
                name: "tetratto",
                ns_store: {},
                classes: {},
            };

            globalThis.no_policy = false;
        </script>

        <meta name="theme-color" content="{{ config.color }}" />
        <meta name="description" content="{{ config.description }}" />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="{{ config.name }}" />

        <meta name="turbo-prefetch" content="false" />
        <meta name="turbo-refresh-method" content="morph" />
        <meta name="turbo-refresh-scroll" content="preserve" />

        <script
            src="https://unpkg.com/@hotwired/turbo@8.0.5/dist/turbo.es2017-esm.js"
            type="module"
            async
            defer
        ></script>

        {% block head %}{% endblock %}
    </head>

    <body>
        <div id="toast_zone"></div>

        <div id="page" style="display: contents">
            {% block body %}{% endblock %}
        </div>

        <script data-turbo-permanent="true" id="init-script">
            document.documentElement.addEventListener("turbo:load", () => {
                const atto = ns("atto");

                atto.disconnect_observers();
                atto.clean_date_codes();
                atto.link_filter();

                atto["hooks::scroll"](document.body, document.documentElement);
                atto["hooks::dropdown.init"](window);
                atto["hooks::character_counter.init"]();
                atto["hooks::long_text.init"]();
                atto["hooks::alt"]();
                // atto["hooks::ips"]();
                atto["hooks::check_reactions"]();
                atto["hooks::tabs"]();
                atto["hooks::partial_embeds"]();
            });
        </script>

        <!-- dialogs -->
        <dialog id="link_filter">
            <div class="inner">
                <p>Pressing continue will bring you to the following URL:</p>
                <pre><code id="link_filter_url"></code></pre>
                <p>Are sure you want to go there?</p>

                <hr />
                <div class="flex gap-2">
                    <a
                        class="button primary bold"
                        id="link_filter_continue"
                        rel="noopener noreferrer"
                        target="_blank"
                        onclick="document.getElementById('link_filter').close()"
                    >
                        {{ text "dialog:action.continue" }}
                    </a>
                    <button
                        class="bold"
                        type="button"
                        onclick="document.getElementById('link_filter').close()"
                    >
                        {{ text "dialog:action.cancel" }}
                    </button>
                </div>
            </div>
        </dialog>

        <dialog id="web_api_prompt">
            <div class="inner flex flex-col gap-2">
                <form
                    class="flex gap-2 flex-col"
                    onsubmit="event.preventDefault()"
                >
                    <label for="prompt" id="web_api_prompt:msg"></label>
                    <input id="prompt" name="prompt" />

                    <div class="flex justify-between">
                        <div></div>

                        <div class="flex gap-2">
                            <button
                                class="primary bold circle"
                                onclick="globalThis.web_api_prompt_submit(document.getElementById('prompt').value); document.getElementById('prompt').value = ''"
                                type="button"
                            >
                                {{ icon "check" }} {{ text "dialog:action.okay"
                                }}
                            </button>

                            <button
                                class="bold red camo"
                                onclick="globalThis.web_api_prompt_submit('')"
                                type="button"
                            >
                                {{ icon "x" }} {{ text "dialog:action.cancel" }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </dialog>

        <dialog id="web_api_prompt_long">
            <div class="inner flex flex-col gap-2">
                <form
                    class="flex gap-2 flex-col"
                    onsubmit="event.preventDefault()"
                >
                    <label
                        for="prompt_long"
                        id="web_api_prompt_long:msg"
                    ></label>
                    <textarea id="prompt_long" name="prompt_long"></textarea>

                    <div class="flex justify-between">
                        <div></div>

                        <div class="flex gap-2">
                            <button
                                class="primary bold circle"
                                onclick="globalThis.web_api_prompt_long_submit(document.getElementById('prompt_long').value); document.getElementById('prompt_long').value = ''"
                                type="button"
                            >
                                {{ icon "check" }} {{ text "dialog:action.okay"
                                }}
                            </button>

                            <button
                                class="bold red camo"
                                onclick="globalThis.web_api_prompt_long_submit('')"
                                type="button"
                            >
                                {{ icon "x" }} {{ text "dialog:action.cancel" }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </dialog>

        <dialog id="web_api_confirm">
            <div class="inner flex flex-col gap-2">
                <form
                    class="flex gap-2 flex-col"
                    onsubmit="event.preventDefault()"
                >
                    <label id="web_api_confirm:msg"></label>

                    <div class="flex justify-between">
                        <div></div>

                        <div class="flex gap-2">
                            <button
                                class="primary bold circle"
                                onclick="globalThis.web_api_confirm_submit(true)"
                                type="button"
                            >
                                {{ icon "check" }} {{ text "dialog:action.yes"
                                }}
                            </button>

                            <button
                                class="bold red camo"
                                onclick="globalThis.web_api_confirm_submit(false)"
                                type="button"
                            >
                                {{ icon "x" }} {{ text "dialog:action.no" }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </dialog>
    </body>
</html>