<section class="setup-box js-setup-box fade-in">
    <div class="vertical">
        <form id="setup" class="setup-form" method="post" novalidate="novalidate">

            {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
            <input style="display:none;" type="text" name="fakeusernameremembered"/>
            <input style="display:none;" type="password" name="fakepasswordremembered"/>

            <header>
                <h1>Welcome to your new Ghost blog</h1>
                <h2>Let's get a few things set up so you can get started.</h2>
            </header>
            <div class="form-group">
                <label for="blog-title">Blog Title</label>
                {{input type="text" name="blog-title" autofocus="autofocus" autocorrect="off" value=blogTitle }}
                <p>What would you like to call your blog?</p>
            </div>
            <div class="form-group">
                <label for="name">Full Name</label>
                {{input type="text" name="name" autofocus="autofocus" autocorrect="off" value=name }}
                <p>The name that you will sign your posts with</p>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                {{input type="email" name="email" autofocus="autofocus" autocorrect="off" value=email }}
                <p>Used for important notifications</p>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                {{input type="password" name="password" autofocus="autofocus" autocorrect="off" value=password }}
                <p>Must be at least 8 characters</p>
            </div>
            <footer>
                <button type="submit" class="button-add large" {{action "setup"}} {{bind-attr disabled=submitting}}>Ok, Let's Do This</button>
            </footer>
        </form>
    </div>
</section>