<div class="gh-flow">

    <div class="gh-flow-content-wrap">
        <section class="gh-flow-content">
            <header>
                <h1>Create your account</h1>
            </header>

            <form id="signup" class="gh-flow-create" method="post" novalidate="novalidate" onsubmit={{action "submit"}}>
                <GhProfileImage @email={{this.signupDetails.email}} @setImage={{action "setImage"}} />

                <GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="name">
                    <label for="name">Full name</label>
                    <span class="gh-input-icon gh-icon-user">
                        {{svg-jar "user-circle"}}
                        <GhTrimFocusInput
                            @tabindex="1"
                            @type="text"
                            @id="display-name"
                            @name="display-name"
                            @placeholder="Eg. John H. Watson"
                            @autocorrect="off"
                            @autocomplete="name"
                            @value={{readonly this.signupDetails.name}}
                            @input={{action (mut this.signupDetails.name) value="target.value"}}
                            @focus-out={{action "validate" "name"}}
                            data-test-input="name"
                        />
                    </span>
                    <GhErrorMessage @errors={{this.signupDetails.errors}} @property="name" />
                </GhFormGroup>

                <GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="email">
                    <label for="email">Email address</label>
                    <span class="gh-input-icon gh-icon-mail">
                        {{svg-jar "email"}}
                        <GhTextInput
                            @tabindex="2"
                            @type="text"
                            @id="username"
                            @name="username"
                            @placeholder="Eg. john@example.com"
                            @autocorrect="off"
                            @autocomplete="username email"
                            @value={{readonly this.signupDetails.email}}
                            @input={{action (mut this.signupDetails.email) value="target.value"}}
                            @focus-out={{action "validate" "email"}}
                            data-test-input="email"
                        />
                    </span>
                    <GhErrorMessage @errors={{this.signupDetails.errors}} @property="email" />
                </GhFormGroup>

                <GhFormGroup @errors={{this.signupDetails.errors}} @hasValidated={{this.signupDetails.hasValidated}} @property="password">
                    <label for="password">Password</label>
                    <span class="gh-input-icon gh-icon-lock">
                        {{svg-jar "lock"}}
                        <GhTextInput
                            @tabindex="3"
                            @type="password"
                            @id="password"
                            @name="password"
                            @placeholder="At least 10 characters"
                            @autocorrect="off"
                            @autocomplete="new-password"
                            @value={{readonly this.signupDetails.password}}
                            @input={{action (mut this.signupDetails.password) value="target.value"}}
                            @focus-out={{action "validate" "password"}}
                            data-test-input="password"
                        />
                    </span>
                    <GhErrorMessage @errors={{this.signupDetails.errors}} @property="password" />
                </GhFormGroup>

                <GhTaskButton @buttonText="Create Account" @type="submit" @form="signup" @defaultClick={{true}} @runningText="Creating"
                    @task={{this.signup}} @class="gh-btn-create-account gh-btn gh-btn-green gh-btn-lg gh-btn-block gh-btn-icon" @tabindex="3" />
            </form>

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

</div>
