{{define "title"}} — Login{{end}}
{{define "container-class"}}auth-container{{end}}
{{define "content"}}
<div class="auth-header">
    <div class="brand">mcq</div>
    <div class="tagline">Metacircular Reading Queue</div>
</div>
<div class="card">
    {{if .Error}}<div class="error">{{.Error}}</div>{{end}}
    {{if .SSO}}
    <div class="form-actions">
        <a href="/sso/redirect" style="display:block;text-align:center;text-decoration:none;"><button type="button" style="width:100%" class="btn">Sign in with MCIAS</button></a>
    </div>
    {{else}}
    <form method="POST" action="/login">
        {{csrfField}}
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required autofocus>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label for="totp_code">TOTP Code (optional)</label>
            <input type="text" id="totp_code" name="totp_code" inputmode="numeric" autocomplete="one-time-code">
        </div>
        <div class="form-actions">
            <button type="submit" class="btn">Login</button>
        </div>
    </form>
    {{end}}
</div>
{{end}}