<!--
Copyright 2022 the Pinniped contributors. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0

Notes:
- favicon data is from `base64 -i site/themes/pinniped/static/img/favicon.png`
- "role", "aria-*", and "alert" attributes are hints to screen readers
- Some structure and attributes used here are hints to password managers,
  see https://support.1password.com/compatible-website-design/
- Please take care when changing the HTML of this form,
  and test with a screen reader and password manager after changes

--><!DOCTYPE html>
<html lang="en">
<head>
    <title>Pinniped Login</title>
    <meta charset="UTF-8">
    <style>{{minifiedCSS}}</style>
    <link href="data:image/x-icon;base64,[encoded data, 12540 characters]"
          rel="icon" type="image/x-icon"/>
</head>
<body>
<div class="box" aria-label="login form" role="main">
    <div class="form-field">
        <h1>Log in to {{.IDPName}}</h1>
    </div>
    {{if .HasAlertError}}
    <div class="form-field">
        <span class="alert" role="alert" aria-label="login error message" id="alert">{{.AlertMessage}}</span>
    </div>
    {{end}}
    <form action="{{.PostPath}}" method="post">
        <input type="hidden" name="state" id="state" value="{{.State}}">
        <div class="form-field">
            <label for="username"><span class="hidden" aria-hidden="true">Username</span></label>
            <input type="text" name="username" id="username"
                   autocomplete="username" placeholder="Username" required>
        </div>
        <div class="form-field">
            <label for="password"><span class="hidden" aria-hidden="true">Password</span></label>
            <input type="password" name="password" id="password"
                   autocomplete="current-password" placeholder="Password" required>
        </div>
        <div class="form-field">
            <input type="submit" name="submit" id="submit" value="Log in"/>
        </div>
    </form>
</div>
</body>
</html>
