<div id='user-edit'>
    <form class='tabular'>
        <div class='left'>
            <div class='input'>
                <ul>
                    {{#if this.canEditName}}
                        <li>
                            {{textInput text='User name' id='user-name' name='name' value=this.user.name pattern=this.userNamePattern}}
                        </li>
                    {{/if}}

                    {{#if this.canEditPassword}}
                        <li>
                            {{passwordInput text='Password' id='user-password' name='password' placeholder='leave blank if not changing' pattern=this.passwordPattern}}
                        </li>
                    {{/if}}

                    {{#if this.canEditEmail}}
                        <li>
                            {{emailInput text='Email' id='user-email' name='email' value=this.user.email}}
                        </li>
                    {{/if}}

                    {{#if this.canEditRank}}
                        <li>
                            {{select text='Rank' id='user-rank' name='rank' keyValues=this.ranks selectedKey=this.user.rank}}
                        </li>
                    {{/if}}
                </ul>
            </div>
            <div class='messages'></div>
            <div class='buttons'>
                <input type='submit' value='Save settings'/>
            </div>
        </div>

        {{#if this.canEditAvatar}}
            <div class='right'>
                <ul>
                    <li>
                        {{radio text='Gravatar' id='gravatar-radio' name='avatar-style' value='gravatar' selectedValue=this.user.avatarStyle}}
                    </li>
                    <li>
                        {{radio text='Manual avatar' id='avatar-radio' name='avatar-style' value='manual' selectedValue=this.user.avatarStyle}}
                        <div id='avatar-content'></div>
                    </li>
                </ul>
            </div>
        {{/if}}
    </form>
</div>