{{template "main-top" .}}

<div class="lgn-head">
    <h1>{{t "PasswordChange.Title"}}</h1>
    {{ template "user-profile" . }}

    {{if .Expired}}
    <p>{{t "PasswordChange.ExpiredDescription"}}</p>
    {{else}}
    <p>{{t "PasswordChange.Description"}}</p>
    {{end}}
</div>

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

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
    <input type="text" name="loginName" value="{{if .DisplayLoginNameSuffix}}{{.LoginName}}{{else}}{{.UserName}}{{end}}" autocomplete="username" class="hidden" />

    <div class="fields">
        <div class="field">
            <label class="lgn-label" for="change-old-password">{{t "PasswordChange.OldPasswordLabel"}}</label>
            <input class="lgn-input" type="password" id="change-old-password" name="change-old-password"
                autocomplete="current-password" autofocus required>
        </div>

        <div class="field">
            <label class="lgn-label" for="change-new-password">{{t "PasswordChange.NewPasswordLabel"}}</label>
            <input data-minlength="{{ .MinLength }}" data-has-uppercase="{{ .HasUppercase }}"
                data-has-lowercase="{{ .HasLowercase }}" data-has-number="{{ .HasNumber }}"
                data-has-symbol="{{ .HasSymbol }}" class="lgn-input" type="password" id="change-new-password"
                name="change-new-password" autocomplete="new-password" required>
        </div>

        <div class="field">
            <label class="lgn-label"
                for="change-password-confirmation">{{t "PasswordChange.NewPasswordConfirmLabel"}}</label>
            <input class="lgn-input" type="password" id="change-password-confirmation"
                name="change-password-confirmation" autocomplete="new-password" required>
            {{ template "password-complexity-policy-description" . }}
        </div>
    </div>

    {{ template "error-message" .}}

    <div class="lgn-actions">
        <a class="lgn-stroked-button" href="{{ loginUrl }}">
            {{t "PasswordChange.CancelButtonText"}}
        </a>
        <span class="fill-space"></span>
        <button type="submit" id="change-password-button" name="resend" value="false"
            class="lgn-raised-button lgn-primary">{{t "PasswordChange.NextButtonText"}}</button>
    </div>
</form>

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


{{template "main-bottom" .}}