{% extends "base.html" %}
{% block title %}Sign in - {{ ui.brand_name }}{% endblock %}
{% block auth %}
{% endblock %}
{% block content %}
    <div class="login-container">
        <div style="text-align:center;max-width:320px">
            <p style="font-size:14px;font-weight:650;color:var(--text);margin-bottom:6px">
                Sign in to {{ ui.brand_name }}
            </p>
            <p style="font-size:12px;color:var(--text-muted);margin-bottom:16px">
                Authentication required to access this instance.
            </p>
            <button type="button" class="btn" onclick="document.getElementById('login-dialog').showModal()">Sign in</button>
        </div>
    </div>

    <dialog id="login-dialog" class="dialog-sm">
        <div class="dialog-header">
            <h2>Sign in</h2>
            <button type="button"
                    class="btn-ghost dialog-close"
                    onclick="document.getElementById('login-dialog').close()"
                    aria-label="Close">
                &times;
            </button>
        </div>
        <div class="dialog-body">
            {% match error %}
                {% when Some with (msg) %}
                    <div class="flash-message flash-error">{{ msg }}</div>
                {% when None %}
            {% endmatch %}
            <form method="POST" action="/login">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" placeholder="username" autocomplete="username">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password"
                           id="password"
                           name="password"
                           placeholder="password"
                           autocomplete="current-password">
                </div>
                <button type="submit" class="btn btn-full">Sign in</button>
            </form>
            <div class="login-divider">
                <span>or</span>
            </div>
            <form method="POST" action="/login">
                <div class="form-group">
                    <label for="api_key">API Key</label>
                    <input type="password"
                           id="api_key"
                           name="api_key"
                           placeholder="circus_..."
                           autocomplete="current-password">
                </div>
                <button type="submit" class="btn btn-secondary btn-full">Sign in with API key</button>
            </form>
        </div>
    </dialog>

    <script>document.getElementById('login-dialog').showModal();</script>
{% endblock %}