{{template "main-top" .}}

<div class="lgn-head">
    <h1>{{t "Password.Title"}}</h1>
    <p>{{t "Password.Description"}}</p>

    {{ template "user-profile" . }}
</div>

<form action="{{ passwordUrl }}" method="POST">

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
    <input type="hidden" name="loginName" value="{{ .LoginName }}" autocomplete="username" />

    <div class="fields">
        <label class="lgn-label" for="password">{{t "Password.PasswordLabel"}}</label>
        <input class="lgn-input" type="password" id="password" name="password" autocomplete="current-password" autofocus
            required {{if .ErrMessage}}shake {{end}}>
    </div>

    {{template "error-message" .}}

    {{ if showPasswordReset }}
    <a class="block sub-formfield-link" href="{{ passwordResetUrl .AuthReqID }}">
        {{t "Password.ResetLinkText"}}
    </a>
    {{ end }}

    <div class="lgn-actions">
        <a href="{{ loginNameChangeUrl .AuthReqID }}">
            <button class="lgn-stroked-button" type="button">{{t "Password.BackButtonText"}}</button>
        </a>
        <span class="fill-space"></span>
        <button id="submit-button" class="lgn-raised-button lgn-primary right" type="submit">{{t "Password.NextButtonText"}}</button>
    </div>
</form>

{{template "main-bottom" .}}

<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/default_form_validation.js" }}"></script>