<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WarpBox Login - {{ .BoxID }}</title>
        <link rel="icon" type="image/png" href="/static/WarpBoxLogo.png">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/static/css/app.css">
        <link rel="stylesheet" href="/static/css/window.css">
        <link rel="stylesheet" href="/static/css/login.css">
    </head>

    <body>
        <main>
            <section class="win98-window login-window" aria-labelledby="login-window-title">
                <header class="win98-titlebar login-titlebar">
                    <div class="win98-titlebar-label">
                        <img class="win98-titlebar-icon" src="/static/WarpBoxLogo.png" alt="" aria-hidden="true">
                        <h1 id="login-window-title">Enter Network Password</h1>
                    </div>
                    <div class="win98-window-controls" aria-hidden="true">
                        <span class="win98-control">_</span>
                        <span class="win98-control">□</span>
                        <span class="win98-control">×</span>
                    </div>
                </header>

                <form class="login-form" action="/box/{{ .BoxID }}/login" method="post">
                    <div class="win98-panel login-panel">
                        <div class="login-alert" role="alert">
                            <img src="/static/img/icons/Windows Icons - PNG/ole2.dll_14_DEFICON.png" alt="" aria-hidden="true">
                            <p>This WarpBox folder is password protected. Enter the password to view and download its files.</p>
                        </div>

                        <label class="login-row" for="box-user">
                            <span>User name</span>
                            <input id="box-user" class="login-input" type="text" value="{{ .BoxUser }}" readonly>
                        </label>

                        <label class="login-row" for="box-password">
                            <span>Password</span>
                            <input id="box-password" class="login-input" type="password" name="password" autocomplete="current-password" autofocus>
                        </label>

                        {{ if .ErrorMessage }}
                            <p class="login-error">{{ .ErrorMessage }}</p>
                        {{ end }}
                    </div>

                    <footer class="login-actions">
                        <button class="win98-button" type="submit">OK</button>
                        <a class="win98-button" href="/">Cancel</a>
                    </footer>

                    <div class="win98-statusbar login-statusbar">
                        <span>Protected folder</span>
                        <span>WarpBox</span>
                    </div>
                </form>
            </section>
        </main>
    </body>
</html>
