{{ template "header.html" . }}

<div class="nb-card">
    <h1 class="nb-heading">Sign in</h1>
    <p class="nb-subheading">Enter your credentials</p>

    <form method="post" action="{{ .PostURL }}">
        {{ if .Invalid }}
        <div class="nb-error">
            Invalid {{ .UsernamePrompt }} or password.
        </div>
        {{ end }}

        <div class="nb-form-group">
            <label class="nb-label" for="login">{{ .UsernamePrompt }}</label>
            <input
                type="text"
                id="login"
                name="login"
                class="nb-input"
                placeholder="Enter your {{ .UsernamePrompt | lower }}"
                {{ if .Username }}value="{{ .Username }}"{{ else }}autofocus{{ end }}
                required
            >
        </div>

        <div class="nb-form-group">
            <label class="nb-label" for="password">Password</label>
            <input
                type="password"
                id="password"
                name="password"
                class="nb-input"
                placeholder="Enter your password"
                {{ if .Invalid }}autofocus{{ end }}
                required
            >
        </div>

        <button type="submit" id="submit-login" class="nb-btn">
            Sign in
        </button>
    </form>

    {{ if .BackLink }}
    <div class="nb-back-link">
        <a href="{{ .BackLink }}" class="nb-link">Choose another login method</a>
    </div>
    {{ end }}
</div>

<script>
document.querySelector('form').onsubmit = function() {
    document.getElementById('submit-login').disabled = true;
};
</script>

{{ template "footer.html" . }}