<header class="user-settings-header">

    <h2 class="hidden">Your Profile</h2>

    <div class="settings-header-inner">
	{{#link-to 'settings' class='button-back button'}}Back{{/link-to}}
        <section class="page-actions page-actions-alt">
            {{#link-to "settings.users" class="button has-icon users-back" tagName="button"}}<i class="icon-chevron-left"></i>Users{{/link-to}}
        </section>

        <section class="page-actions">

            {{!-- {{#gh-popover-button popoverName="user-actions-menu" tagName="a" classNames="button only-has-icon user-actions-cog" title="User Actions"}}
                <i class="icon-settings"></i>
                <span class="hidden">User Settings</span>
            {{/gh-popover-button}}
            {{#gh-popover name="user-actions-menu" classNames="user-actions-menu menu-drop-right"}}
                {{render "user-actions-menu" model}}
            {{/gh-popover}} --}}

            <button class="button-save" {{action "save"}}>Save</button>
        </section>
    </div>

</header>

<section class="content settings-user no-padding">

    <header class="user-profile-header">
        <img id="user-cover" class="cover-image" {{bind-attr src=cover title=coverTitle}} />
        <a class="edit-cover-image js-modal-cover button" {{action "openModal" "upload" user "cover"}}>Change Cover</a>
    </header>

    <form class="user-profile" novalidate="novalidate">

        <fieldset class="user-details-top">

            <figure class="user-image">
                <div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}"s Picture</span></div>
                <a href="" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</a>
            </figure>

            <div class="form-group">
                <label for="user-name">Full Name</label>
                {{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
                <p>Use your real name so people can recognise you</p>
            </div>

        </fieldset>

        <fieldset class="user-details-bottom">

            {{!-- <div class="form-group">
                <label for="user-slug">Slug</label>
                {{input value=user.slug id="user-slug" placeholder="Slug" autocorrect="off"}}
                <p>http://blog-url.com/user/{{user.slug}}</p>
            </div> --}}

            <div class="form-group">
                <label for="user-email">Email</label>
                {{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off"}}
                <p>Used for notifications</p>
            </div>

            {{!-- The correct markup for select boxes. Needs changing to the correct data --}}
            {{!-- <div class="form-group">
                <label for="user-role">Role</label>
                <span class="gh-select" {{bind-attr data-select-text=selectedTheme.label}}>
                   {{view Ember.Select
                       id="activeTheme"
                       name="general[activeTheme]"
                       content=themes
                       optionValuePath="content.name"
                       optionLabelPath="content.label"
                       value=activeTheme
                       selection=selectedTheme}}
               </span>
                <p>What permissions should this user have?</p>
            </div> --}}

            <div class="form-group">
                <label for="user-location">Location</label>
                {{input type="text" value=user.location id="user-location"}}
                <p>Where in the world do you live?</p>
            </div>

            <div class="form-group">
                <label for="user-website">Website</label>
                {{input type="url" value=user.website id="user-website" placeholder="http://www.ghost.org/" autocapitalize="off" autocorrect="off"}}
                <p>Have a website or blog other than this one? Link it!</p>
            </div>

            <div class="form-group bio-container">
                <label for="user-bio">Bio</label>
                {{textarea id="user-bio" value=user.bio}}
                <p>
                    Write about you, in 200 characters or less.
                    {{gh-count-characters user.bio}}
                </p>
            </div>

            <hr />

        </fieldset>

        <fieldset>

            <div class="form-group">
                <label for="user-password-old">Old Password</label>
                {{input value=user.password type="password" id="user-password-old"}}
            </div>

            <div class="form-group">
                <label for="user-password-new">New Password</label>
                {{input value=user.newPassword type="password" id="user-password-new"}}
            </div>

            <div class="form-group">
                <label for="user-new-password-verification">Verify Password</label>
                {{input value=user.ne2Password type="password" id="user-new-password-verification"}}
            </div>
            <div class="form-group">
                <button type="button" class="button-delete button-change-password" {{action "password"}}>Change Password</button>
            </div>

        </fieldset>

    </form>
</section>