{% extends "_layout.html.j2" %}
{% import "_components/form.html.j2" as form %}

{%- block head -%}
<link rel="stylesheet" href="{{ crate::ROUTE_PREFIX }}/resources/login.css">
{%- endblock -%}

{%- block title -%}
Link your account
{%- endblock -%}

{%- block content -%}
<div class="panel narrow">
    <h1 class="with-matrix-icon">
        Link your account
        <a href="https://matrix.org" target="_blank" noreferer>
            <img class="matrix-icon" alt="Matrix logo" aria-ignore src="{{ crate::ROUTE_PREFIX }}/resources/matrix-icon.svg">
        </a>
    </h1>
    {% match body %}
        {% when OidcCompleteBody::UsernamePrompt { server_name, username_error } %}
            <form method="post">
                <p>
                    To finish linking your account to Matrix, choose a username.
                    <br>If you have an existing Matrix account, enter its user ID to link it.
                </p>
                <p>
                    <label for="username">Username</label>
                    <span class="username-input">
                        <span>@</span>
                        <input type="text" id="username" name="username" autocomplete="username" required>
                        <span>:{{ server_name }}</span>
                    </span>
                    {% if let Some(username_error) = username_error %}
                        <small class="error">
                            {{ username_error }}
                        </small>
                    {% endif %}
                    <small>Your username cannot be changed after you link your account.</small>
                </p>
                <button type="submit">Continue</button>
            </form>
        {% when OidcCompleteBody::PasswordPrompt { username, user_card, password_error } %}
            {{ user_card }}
            <form method="post">
                <p>To link this legacy account, enter the password you used to use when logging in.</p>
                <p>
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" autocomplete="current-password">
                    {% if password_error %}
                        <small class="error">Incorrect password</small>
                    {% endif %}
                </p>
                <input type="hidden" name="username" value="{{ username }}">
                <button type="submit">Continue</button>
            </form>
    {% endmatch %}
</div>
{% endblock %}
