<div class="gh-flow">
    <div class="gh-flow-content-wrap">
        <section class="gh-flow-content">
            {{#if this.passwordResetEmailSent}}
                <div class="gh-auth-email">
                    <header>
                        <div class="gh-site-icon" style={{site-icon-style}}></div>
                        <h1>Update your password.</h1>
                        <p>
                            For security, you need to create a new password. An email has been sent to you with instructions.
                        </p>
                    </header>
                </div>
            {{else}}
                <form id="login" method="post" class="gh-signin" novalidate="novalidate" {{on "submit" (perform this.validateAndAuthenticateTask)}}>
                    <header>
                        <div class="gh-site-icon" style={{site-icon-style}}></div>
                        <h1>{{this.config.blogTitle}}</h1>
                    </header>
                    <GhFormGroup @errors={{this.signin.errors}} @hasValidated={{this.hasValidated}} @property="identification">
                        <label for="identification">Email address</label>
                        <span class="gh-input-icon gh-icon-mail">
                            <input
                                id="identification"
                                type="email"
                                class="gh-input email"
                                placeholder="jamie@example.com"
                                name="identification"
                                autocapitalize="off"
                                autocorrect="off"
                                autocomplete="username"
                                value={{this.signin.identification}}
                                {{on "input" this.handleInput}}
                                {{on "blur" (fn this.validateProperty "identification")}}
                            />
                        </span>
                    </GhFormGroup>
                    <GhFormGroup @errors={{this.signin.errors}} @hasValidated={{this.hasValidated}} @property="password">
                        <label for="password">Password</label>
                        <span class="gh-input-icon gh-icon-lock forgotten-wrap">
                            <input
                                id="password"
                                type="password"
                                class="gh-input password"
                                placeholder="•••••••••••••••"
                                name="password"
                                autocomplete="current-password"
                                autocorrect="off"
                                value={{this.signin.password}}
                                {{on "input" this.handleInput}}
                            />

                            <GhTaskButton
                                @task={{this.forgotPasswordTask}}
                                @class="forgotten-link gh-btn gh-btn-link gh-btn-icon"
                                @type="button"
                                @successClass=""
                                @failureClass=""
                                as |task|
                            >
                                <span>{{#if task.isRunning}}{{svg-jar "spinner" class="gh-spinner"}}{{else}}Forgot?{{/if}}</span>
                            </GhTaskButton>
                        </span>
                    </GhFormGroup>

                    <GhTaskButton
                        @buttonText="Sign in &rarr;"
                        @task={{this.validateAndAuthenticateTask}}
                        @showSuccess={{false}}
                        @class="login gh-btn gh-btn-login gh-btn-block gh-btn-icon"
                        @type="submit"
                        style={{accent-color-background}}
                        data-test-button="sign-in" />
                </form>

                <p class="main-error">{{if this.flowErrors this.flowErrors}}&nbsp;</p>
            {{/if}}
        </section>
    </div>
</div>
