<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">
                {{!-- Hack to stop Chrome's broken auto-fills --}}
                <input style="display:none;" type="text" name="fakeusernameremembered"/>
                <input style="display:none;" type="password" name="fakepasswordremembered"/>

                <figure class="account-image">
                    <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
                        <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
                        <span class="sr-only">User image</span>
                    </div>
                    <a class="edit-account-image" href="#"><i class="icon-photos "><span class="sr-only">Upload an image</span></i></a>
                </figure>
                {{#gh-form-group errors=model.errors property="email"}}
                    <label for="email-address">Email address</label>
                    <span class="input-icon icon-mail">
                        {{gh-input type="email" name="email" placeholder="Eg. john@example.com" class="gh-input" enter=(action "signup") autofocus="autofocus" autocorrect="off" value=model.email focusOut=(action "validate" "email")}}
                    </span>
                    {{gh-error-message errors=model.errors property="email"}}
                {{/gh-form-group}}
                {{#gh-form-group errors=model.errors property="name"}}
                    <label for="full-name">Full name</label>
                    <span class="input-icon icon-user">
                        {{gh-input type="text" name="name" placeholder="Eg. John H. Watson" class="gh-input" enter=(action "signup") autofocus="autofocus" autocorrect="off" value=model.name focusOut=(action "validate" "name")}}
                    </span>
                    {{gh-error-message errors=model.errors property="name"}}
                {{/gh-form-group}}
                {{#gh-form-group errors=model.errors property="password"}}
                    <label for="password">Password</label>
                    <span class="input-icon icon-lock">
                        {{input class="gh-input" type="password" name="password" autofocus="autofocus" enter=(action "signup") autocorrect="off" value=model.password focusOut=(action "validate" "password")}}
                        <div class="pw-strength">
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot"></div>
                            <div class="pw-strength-dot <!--pw-strength-activedot-->"></div>
                        </div>
                    </span>
                    {{gh-error-message errors=model.errors property="password"}}
                {{/gh-form-group}}
            </form>

            {{gh-spin-button type="submit" class="btn btn-green btn-lg btn-block" action="signup" submitting=submitting buttonText="Create Account" autoWidth=false}}
            <p class="main-error">{{{flowErrors}}}</p>
        </section>
    </div>

</div>