{% extends "default.html" %}
{% block title %}
    {% trans %}Login{% endtrans %}
{% endblock %}
{% block breadcrumbs %}
{% endblock %}

{% block content %}
    <style>
        #login-forms {
            justify-content: center;
        }

        @media screen and (max-width: 640px) {
            #login-forms {
                flex-direction: column;
            }
        }
    </style>
    <x-frame style="--width: 384px; --padding: 1em;">
        <x-hbox id="login-forms">
            <x-vbox>
                <h2>{% trans %}Log in{% endtrans %}</h2>
                <form method="post" id="login">
                    <input type="hidden" name="login" value="login">
                    <div class="card">
                        <section>
                            <x-vbox>
                                <label>
                                    {% trans %}Username{% endtrans %}
                                    <input id="login-username" name="username" required>
                                </label>
                                <label>
                                    {% trans %}Password{% endtrans %}
                                    <input id="login-password" name="password" type="password"
                                           required>
                                </label>
                                <button style="width: 100%;" id="login-submit" type="submit">
                                    {% trans %}Log in{% endtrans %}</button>
                            </x-vbox>
                        </section>
                    </div>
                </form>
            </x-vbox>
            <x-vbox>
                <h2>{% trans %}Sign up{% endtrans %}</h2>
                <form method="post" id="signup">
                    <input type="hidden" name="signup" value="signup">
                    <div class="card">
                        <section>
                            <x-vbox>
                                <label>
                                    {% trans %}Wanted username{% endtrans %}
                                    <input id="signup-username" name="username" required>
                                    {% trans %}Only letters, numbers or hyphens, cannot be
                                        changed later{% endtrans %}
                                </label>
                                <label>
                                    {% trans %}Password{% endtrans %}
                                    <input id="signup-password" name="password" type="password"
                                           required>
                                    {% trans %}Stored only hashed, so we can't recover it for
                                        you{% endtrans %}
                                </label>
                                <label>
                                    {% trans %}Repeat password{% endtrans %}
                                    <input id="signup-password-2" name="password2"
                                           type="password" required>
                                </label>
                                <label>
                                    {% trans %}Email (recommended){% endtrans %}
                                    <input id="signup-email" name="email" type="email">
                                    {% trans %}Used for notifications, only displayed if you'd
                                        like to{% endtrans %}
                                </label>
                                <label>
                                    {% trans %}Display name (optional){% endtrans %}
                                    <input id="signup-name" name="name">
                                    {% trans %}Doesn't have username restrictions, can be
                                        changed later{% endtrans %}
                                </label>
                                <label>
                                    <input id="signup-terms" type="checkbox" name="tos"
                                           required>
                                    <span>{% trans %}I accept the{% endtrans %} <a
                                            href="/help/policies">{% trans %}policies listed
                                        here{% endtrans %}</a></span>
                                </label>
                                <button style="width: 100%;" id="signup-submit" type="submit">
                                    {% trans %}Sign up{% endtrans %}</button>
                            </x-vbox>
                        </section>
                    </div>
                </form>
            </x-vbox>
        </x-hbox>
    </x-frame>
{% endblock %}