{{define "title"}} - Login{{end}}
{{define "container-class"}}auth-container{{end}}
{{define "content"}}
<div class="auth-header">
    <div class="brand">Metacrypt</div>
    <div class="tagline">Cryptographic Services</div>
</div>
<div class="card">
    <div class="card-title">Sign In</div>
    <p>Authenticate with your MCIAS credentials.</p>
    {{if .Error}}<div class="error">{{.Error}}</div>{{end}}
    <form method="POST" action="/login">
        {{csrfField}}
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required autofocus autocomplete="username">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required autocomplete="current-password">
        </div>
        <div class="form-group">
            <label for="totp_code">TOTP Code <small style="text-transform:none;letter-spacing:0;">(if enabled)</small></label>
            <input type="text" id="totp_code" name="totp_code" autocomplete="one-time-code" inputmode="numeric">
        </div>
        <div class="form-actions">
            <button type="submit">Login</button>
        </div>
    </form>
</div>
{{end}}