<!DOCTYPE html>
<%- include("./snippets/timon.ejs") %>
<html lang="de-ch" data-theme="light">
    <head>
        <%- include("./snippets/head.ejs", {
            title: title,
            date: date,
            desc: desc,
            url: url,
            env: env,
            sitetype: sitetype
        }) %>
        <script type="text/javascript" src="/js/login.js" defer></script>
        <link rel="stylesheet" href="/css/login.css">
        <meta redirect="<%- redir %>" id="redir">
    </head>
    <body>
        <%- include("./snippets/header.ejs") %>
        <main>
            <form class="login flex">
                <h1>Login</h1>
                <label for="username">E-Mail</label>
                <div class="input">
                    <img alt="Eine Person" src="/img/svg/personal.svg">
                    <input type="text" autocomplete="email" autofocus id="username" required placeholder="E-Mail eingeben">
                </div>
                <label for="password">Passwort</label>
                <div class="input">
                    <img alt="Ein Schloss" src="/img/svg/lock.svg">
                    <input type="password" autocomplete="current-password" id="password" required placeholder="Passwort eingeben">
                    <img alt="Ein Auge (Zu oder offen)" src="/img/svg/eye.svg" id="show_password">
                </div>
                <div class="password-forgotten-wrapper">
                    <p class="password-forgotten" id="password-forgotten">Passwort vergessen?</p>
                </div>
                <button type="submit" id="submit_login">Einloggen</button>
                <div class="switch">
                    <p>Noch kein Mitglied?</p>
                    <button type="button" class="login_switch">Account erstellen</button>
                </div>
            </form>
            <form class="sign-up">
                <h1>Registrieren</h1>
                <label for="email">E-Mail</label>
                <div class="input">
                    <img alt="Ein Brief" src="/img/svg/mail.svg">
                    <input type="email" autocomplete="email" id="email" required placeholder="E-Mail eingeben">
                </div>
                <label for="new_password">Passwort</label>
                <div class="input">
                    <img alt="Ein Schloss" src="/img/svg/lock.svg">
                    <input type="password" autocomplete="new-password" id="new_password" required placeholder="Passwort eingeben">
                    <img alt="Ein Auge (Zu oder offen)" src="/img/svg/eye.svg" id="show_new_password">
                </div>
                <input style="display: none;" type="text" id="new_username" value="not_defined">
                <label for="name">Vorname</label>
                <div class="input">
                    <img alt="Buchstaben" src="/img/svg/text.svg">
                    <input type="text" autocomplete="given-name" id="name" required placeholder="Vornamen eingeben">
                </div>
                <label for="family_name">Nachname</label>
                <div class="input">
                    <img alt="Buchstaben" src="/img/svg/text.svg">
                    <input type="text" autocomplete="family-name" id="family_name" required placeholder="Nachnamen eingeben">
                </div>
                <label for="address">Adresse</label>
                <div class="input">
                    <img alt="Location" src="/img/svg/location.svg">
                    <input type="text" autocomplete="address-line1" id="address" required placeholder="Adresse eingeben">
                </div>
                <label for="phone">Telefon Nummer (optional)</label>
                <div class="input">
                    <img alt="Ein Telefon" src="/img/svg/phone.svg">
                    <input type="tel" autocomplete="tel" id="phone" placeholder="Telefon Nummer eingeben">
                </div>
                <label for="file">Profilbild (optional)</label>
                <div class="input">
                    <img alt="Ein Bild" src="/img/svg/image.svg">
                    <label for="file" class="file">Profilbild hinzufügen</label>
                    <input type="file" id="file" accept="image/png, image/jpg, image/gif, image/jpeg, image/tiff, image/raw, image/bpm, image/webp, image/ico">
                </div>
                <button type="submit" id="submit_sign_up">Account erstellen</button>
                <div class="switch">
                    <p>Bereits Mitglied?</p>
                    <button type="button" class="login_switch">Einloggen</button>
                </div>
            </form>
            <form class="password-recovery">
                <h1>Passwort zurücksetzten</h1>
                <p>
                    Wenn du dein Passwort vergessen hast, kannst du dir ein neues schicken lassen. 
                    Beachte jedoch, dass du dich danach nicht mehr mit dem alten Passwort einloggen kannst. 
                    Es wird ebenfalls empfohlen, das generierte Passwort so schnell wie möglich unter "Mein Konto" zu ändern.
                </p>
                <label for="recovery-mail">E-Mail</label>
                <div class="input">
                    <img alt="Eine Person" src="/img/svg/personal.svg">
                    <input type="text" autocomplete="email" autofocus id="recovery-mail" required placeholder="E-Mail eingeben">
                </div>
                <label for="recovery-code" class="recovery-hidden invisible">Code zum zurücksetzten des Passworts</label>
                <div class="input recovery-hidden invisible">
                    <img alt="Ein Schloss" src="/img/svg/lock.svg">
                    <input type="text" id="recovery-code" required placeholder="Code eingeben">
                </div>
                <button type="submit" id="submit_recovery">Bestätigungscode senden</button>
                <div class="switch">
                    <button type="button" id="recovery_switch">Zurück</button>
                </div>
            </form>
            <p class="error"><img alt="Achtung" src="/img/svg/alert.svg"> Ein Fehler ist aufgetreten: <span id="error">Keiner</span></p>
        </main>
        <img class="bg" alt="Hintergrund: Jungelpflanzen" src="/img/stock/jungle.jpg"><%
        if (js) { %>
        <script id="query_script" defer>
            ready(() => {
                <%= js %>();
                getElm("query_script").remove();
            });
        </script><% }; %>
    </body>
</html>