{{/* Die Anmeldung bekommt einen eigenen, ruhigen Rahmen: keine Navigation, denn
     es gibt noch nichts zu navigieren. */}}
{{template "html-start" .}}

<div class="login-page">
    <div class="shell narrow">
        {{/* Das Logo gibt es in zwei Fassungen: mit dunklem Schriftzug für
             helle Darstellung und mit weißem Schriftzug für dunkle Darstellung.
             <picture> wählt anhand der Systemeinstellung die passende aus. */}}
        <picture class="login-logo">
            <source srcset="/static/img/munin_logo_dark.svg" media="(prefers-color-scheme: dark)">
            <img src="/static/img/munin_logo_transparent.svg" alt="Munin" width="264" height="264">
        </picture>
        <div class="card">
            <span class="help">Mit dem API-Key des Projekts anmelden. Der Plattform-Admin
                verwendet sein Admin-Token.</span>

            {{if .Error}}<div class="message error">{{.Error}}</div>{{end}}

            <form method="POST" action="/login" class="form">
                {{/* Ohne Sitzung gibt es kein CSRF-Token, auf das man sich beziehen
                     könnte. Geschützt ist dieses Formular über SameSite=Lax und
                     das Rate-Limit. */}}
                <div class="field">
                    <label for="key">API-Key</label>
                    <input type="password" id="key" name="key" autofocus
                           autocomplete="current-password" placeholder="wk_…">
                </div>
                <div class="form-actions">
                    <button type="submit">Anmelden</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{template "html-end" .}}