<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        
        <title>rakugaki</title>

        <link rel="stylesheet" href="{{ static 'base.css' }}">
        <link rel="stylesheet" href="{{ static 'fonts.css' }}">
        <link rel="stylesheet" href="{{ static 'index.css' }}">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="importmap">{{{ include_static 'import_map.json' }}}</script>

        <script>
            const HAKU_WASM_PATH = "{{{ static 'wasm/haku.wasm' }}}";
        </script>
        
        <script type="module">
            import "rkgk/live-reload.js";

            import "rkgk/brush-editor.js";
            import "rkgk/canvas-renderer.js";
            import "rkgk/connection-status.js";
            import "rkgk/framework.js";
            import "rkgk/resize-handle.js";
            import "rkgk/reticle-renderer.js";
            import "rkgk/session.js";
            import "rkgk/throbber.js";
            import "rkgk/viewport.js";
            import "rkgk/welcome.js";
    
            import "rkgk/index.js";
        </script>

        <link rel="icon" sizes="16x16" href="{{ static 'favicon/rkgk@1x.png' }}">
        <link rel="icon" sizes="32x32" href="{{ static 'favicon/rkgk@2x.png' }}">
        <link rel="icon" sizes="64x64" href="{{ static 'favicon/rkgk@4x.png' }}">
        <link rel="icon" sizes="128x128" href="{{ static 'favicon/rkgk@8x.png' }}">
        <link rel="icon" sizes="256x256" href="{{ static 'favicon/rkgk@16x.png' }}">
        <link rel="icon" sizes="512x512" href="{{ static 'favicon/rkgk@32x.png' }}">
        <link rel="apple-touch-icon" sizes="16x16" href="{{ static 'favicon/rkgk@1x.png' }}">
        <link rel="apple-touch-icon" sizes="32x32" href="{{ static 'favicon/rkgk@2x.png' }}">
        <link rel="apple-touch-icon" sizes="64x64" href="{{ static 'favicon/rkgk@4x.png' }}">
        <link rel="apple-touch-icon" sizes="128x128" href="{{ static 'favicon/rkgk@8x.png' }}">
        <link rel="apple-touch-icon" sizes="256x256" href="{{ static 'favicon/rkgk@16x.png' }}">
        <link rel="apple-touch-icon" sizes="512x512" href="{{ static 'favicon/rkgk@32x.png' }}">
    </head>

    <body>
        <main>
            <rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
            <rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
            <div class="panels fullscreen" id="panels-overlay">
                <div class="rkgk-panel menu-bar">
                    <a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
                    <hr>
                    <a href="/docs/rkgk.html">Manual</a>
                </div>
                <div class="right">
                    <rkgk-resize-handle
                        data-direction="vertical"
                        data-target="panels-overlay"
                        data-target-property="--right-width"
                        data-init-size="384"
                        data-min-size="128"></rkgk-resize-handle>
                    <rkgk-brush-editor></rkgk-brush-editor>
                </div>
            </div>

            <rkgk-welcome>
                <dialog name="welcome-dialog" class="rkgk-panel">
                    <form method="dialog">
                        <h3>
                            My name is
                            <input
                                name="nickname"
                                type="text"
                                required minlength="1" maxlength="32"
                                placeholder="... (type here!)"
                                autocomplete="off"
                                autofocus></input>
                        </h3>
                        <p>This name will be visible to any friends drawing along with you, so choose something recognizable!<br>
                        Keep in mind you can always change it later.</p>

                        <div style="display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 8px;">
                            <rkgk-throbber name="register-progress"></rkgk-throbber>
                            <button name="register">Register</button>
                        </div>
                    </form>
                </dialog>
            </rkgk-welcome>

            <rkgk-connection-status>
                <dialog name="logging-in-dialog">
                    <rkgk-throbber class="loading"></rkgk-throbber><p>Logging in…</p>
                </dialog>

                <dialog name="error-dialog" class="rkgk-panel">
                    <h1>owie! >_<</h1>
                    <p><i>Uh oh. Seems like the pipe cracked again… There's water everywhere.<br>The basement's half full already. God dammit.</i></p>

                    <p>Super sorry about this! But rakugaki encountered an error and has to restart.</p>
                    <p><b>Rest assured your drawings are safe and sound.</b></p>
                    <p>Either way… try refreshing the page and see if it helps. If not, please report a bug with the following details.</p>

                    <details>
                        <summary>Show error details</summary>
                        <textarea name="error-text" rows="10" readonly></textarea>
                    </details>

                    <p>Thank you from the mountain!</p>

                    <div style="display: flex; flex-direction: row; align-items: center; justify-content: end;">
                        <button name="refresh">Refresh</button>
                    </div>
                </dialog>

                <dialog name="disconnected-dialog">
                    <rkgk-throbber class="loading"></rkgk-throbber>
                    <p>Connection lost. Attempting to reconnect in <span name="reconnect-duration"></span>…</p>
                </dialog>
            </rkgk-connection-status>

            <div class="fullscreen" id="js-loading">
                <rkgk-throbber class="loading"></rkgk-throbber>

                <noscript>
                    <style>
                        #js-loading>rkgk-throbber { display: none; }
                    </style>
                    <p>
                        rakugaki is a web app and does not work without JavaScript :(<br>
                        but I swear it's a very lightweight and delightful web app!
                        You won't regret trying it out.
                    </p>
                </noscript>
            </div>
        </main>
    </body>
</html>