{% extends "default.html" %}
{% block title %}
    login
{% endblock %}
{% block breadcrumbs %}
{% endblock %}

{% block content %}
<x-frame style="--width: 384px;">
    <x-vbox>
        <h1>Log in</h1>
        <x-notebook>
            <label><input type="radio" name="login-tabs" checked>Log in</label>
            <x-tab>
                <form method="post" id="login">
                    <input type="hidden" name="login" value="login">
                    <div class="card">
                        <section>
                            <x-vbox>
                                <x-vbox class="nopad">
                                    <label for="login-username">Username</label>
                                    <input id="login-username" name="username" required>
                                </x-vbox>
                                <x-vbox class="nopad">
                                    <label for="login-password">Password</label>
                                    <input id="login-password" name="password" type="password" required>
                                </x-vbox>
                                <button style="width: 100%;" id="login-submit" type="submit">Log in</button>
                            </x-vbox>
                        </section>
                    </div>
                </form>
                <x-vbox class="nopad">
                    <a href="./altlogin" style="all: inherit; cursor: pointer;">
                        <div class="card">
                            <section>
                                <x-hbox>
                                    <iconify-icon icon="mdi:email-fast" style="font-size: 3em;"></iconify-icon>
                                    <div>
                                        <h3>Log in with disposable code</h3>
                                        <p>Log in without your password using a one-time email</p>
                                    </div>
                                </x-hbox>
                            </section>
                        </div>
                    </a>
                    <a href="./passkey" style="all: inherit; cursor: pointer;">
                        <div class="card">
                            <section>
                                <x-hbox>
                                    <iconify-icon icon="mdi:fingerprint" style="font-size: 3em;"></iconify-icon>
                                    <div>
                                        <h3>Use a passkey</h3>
                                        <p>Use biometrics or a physical security key instead of your password to log in</p>
                                    </div>
                                </x-hbox>
                            </section>
                        </div>
                    </a>
                    <a href="./reset" style="all: inherit; cursor: pointer;">
                        <div class="card">
                            <section>
                                <x-hbox>
                                    <iconify-icon icon="mdi:key" style="font-size: 3em;"></iconify-icon>
                                    <div>
                                        <h3>Reset your password</h3>
                                        <p>Confirm your email to recover access to your account</p>
                                    </div>
                                </x-hbox>
                            </section>
                        </div>
                    </a>
                </x-vbox>
            </x-tab>
            <label><input type="radio" name="login-tabs">Sign up</label>
            <x-tab>
                <form method="post" id="signup">
                    <input type="hidden" name="signup" value="signup">
                    <div class="card">
                        <section>
                            <x-vbox>
                                <x-vbox class="nopad">
                                    <label for="signup-username">Wanted username</label>
                                    <input id="signup-username" name="username" required>
                                </x-vbox>
                                <x-vbox class="nopad">
                                    <label for="signup-password">Password</label>
                                    <input id="signup-password" name="password" type="password" required>
                                </x-vbox>
                                <x-vbox class="nopad">
                                    <label for="signup-password-2">Repeat password</label>
                                    <input id="signup-password-2" name="password2" type="password" required>
                                </x-vbox>
                                <x-vbox class="nopad">
                                    <label for="signup-email">Email (recommended)</label>
                                    <input id="signup-email" name="email" type="email">
                                </x-vbox>
                                <x-vbox class="nopad" style="display: none;">
                                    <label for="signup-email-2">Repeat email (recommended)</label>
                                    <input id="signup-email-2" name="email2" type="email">
                                </x-vbox>
                                <x-vbox class="nopad">
                                    <label for="signup-name">Friendly name (optional)</label>
                                    <input id="signup-name" name="name">
                                </x-vbox>
                                <label>
                                    <input id="signup-terms" type="checkbox" name="tos" required>
                                    I accept the <a href="/help/policies">policies listed here</a>
                                </label>
                                <button style="width: 100%;" id="signup-submit" type="submit">Sign up</button>
                            </x-vbox>
                        </section>
                    </div>
                </form>
                <x-vbox class="nopad">
                    <a href="./school" style="all: inherit; cursor: pointer;">
                        <div class="card">
                            <section>
                                <x-hbox>
                                    <iconify-icon icon="mdi:school" style="font-size: 3em;"></iconify-icon>
                                    <div>
                                        <h3>Get a student account</h3>
                                        <p>Use a code from your teacher to join your class</p>
                                    </div>
                                </x-hbox>
                            </section>
                        </div>
                    </a>
                    <a href="./altsignup" style="all: inherit; cursor: pointer;">
                        <div class="card">
                            <section>
                                <x-hbox>
                                    <iconify-icon icon="mdi:email-fast" style="font-size: 3em;"></iconify-icon>
                                    <div>
                                        <h3>Use other methods</h3>
                                        <p>Do not set up a password, but rather use one-time verifications</p>
                                    </div>
                                </x-hbox>
                            </section>
                        </div>
                    </a>
                    <a href="./github" style="all: inherit; cursor: pointer;">
                        <div class="card">
                            <section>
                                <x-hbox>
                                    <iconify-icon icon="mdi:github" style="font-size: 3em;"></iconify-icon>
                                    <div>
                                        <h3>Move from GitHub</h3>
                                        <p>Easily migrate your profile, repositories and contributions from GitHub</p>
                                    </div>
                                </x-hbox>
                            </section>
                        </div>
                    </a>
    </x-vbox>
            </x-tab>
        </x-notebook>
    </x-vbox>
</x-frame>
{% endblock %}