<div id="title-area">
    <p class="page-header">User details</p>
</div>
<div id="layout-area" class="hero-well">
    <div class="row">
        <form enctype="multipart/form-data" method="post" class="form-horizontal" id="id-new-user-form">
            <input type="hidden" name="id" value="<%= id %>"/>
            <fieldset>
                <div class="col-md-5">
                    <div class="clearfix control-group" id="div_display_name">
                        <label class="control-label" for="display_name">Display name</label>

                        <div class="controls">
                            <input type="text" maxlength="75" name="display_name" class="col-xs-10"
                                   id="display_name"
                                   value="<%= display_name %>">
                        </div>
                    </div>
                    <div class="clearfix control-group" id="div_slug">
                        <label class="control-label" for="slug">Profile Slug</label>

                        <div class="controls">
                            <input type="text" maxlength="75" name="slug" class="col-xs-10"
                                   id="slug"
                                   value="<%= slug %>">
                        </div>
                    </div>
                    <div class="clearfix control-group" id="div_email">
                        <label class="control-label" for="email">E-mail address</label>

                        <div class="controls">
                            <input type="text" maxlength="75" name="email" class="col-xs-10" id="email"
                                   value="<%= email %>">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label bolder blue">Avatar Image</label>

                        <div class="radio">
                            <label>
                                <input type="radio" id='avatar_gravatar' value='gravatar' name="avatar_type"
                                       class="ace"/>
                                <span class="lbl"> Use gravatar image.</span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" id='avatar_social' value='social' name="avatar_type" class="ace"/>
                                <span class="lbl"> Use Twitter/Facebook image.</span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" id='avatar_custom' value='custom' name="avatar_type" class="ace"/>
                                <span class="lbl"> Use custom image.</span>
                            </label>
                        </div>
                    </div>
                    <p id="custom_avatar_helptext" class="text-warning bigger-110 orange">
                        <i class="fa fa-warning-sign"></i>
                        Choose your custom image in your Profile Page
                    </p>
                </div>
                <div class="col-md-7">
                    <div class="row">
                        <div class="widget-box transparent">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title lighter">
                                    <i class="ace-icon fa fa-share green"></i>
                                    Social media sharing
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-4">
                                    <div class="col-xs-6 bordered-right">
                                        <label class="control-label bolder blue"><i class="ace-icon fa fa-facebook"></i> Facebook</label>
                                        <div class="control-group form-inline">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_facebook[plays]"
                                                           id="activity_sharing_facebook[plays]" <%= renderCheckbox(activity_sharing_facebook.plays) %>>
                                                    <span class="lbl"> Plays</span>
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_facebook[likes]"
                                                           id="activity_sharing_facebook[likes]" <%= renderCheckbox(activity_sharing_facebook.likes) %>>
                                                    <span class="lbl"> Likes</span>
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_facebook[favourites]"
                                                           id="activity_sharing_facebook[favourites]" <%= renderCheckbox(activity_sharing_facebook.favourites) %>>
                                                    <span class="lbl"> Favourites</span>
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_facebook[comments]"
                                                           id="activity_sharing_facebook[comments]" <%= renderCheckbox(activity_sharing_facebook.comments) %>>
                                                    <span class="lbl"> Comments</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 bordered-left">
                                        <label class="control-label bolder blue"><i class="ace-icon fa fa-twitter"></i> Twitter</label>
                                        <div class="control-group form-inline">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_twitter[plays]"
                                                           id="activity_sharing_twitter[plays]" <%= renderCheckbox(activity_sharing_twitter.plays) %>>
                                                    <span class="lbl"> Plays</span>
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_twitter[likes]"
                                                           id="activity_sharing_twitter[likes]" <%= renderCheckbox(activity_sharing_twitter.likes) %>>
                                                    <span class="lbl"> Likes</span>
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_twitter[favourites]"
                                                           id="activity_sharing_twitter[favourites]" <%= renderCheckbox(activity_sharing_twitter.favourites) %>>
                                                    <span class="lbl"> Favourites</span>
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="ace"
                                                           name="activity_sharing_twitter[comments]"
                                                           id="activity_sharing_twitter[comments]" <%= renderCheckbox(activity_sharing_twitter.comments) %>>
                                                    <span class="lbl"> Comments</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr hr-double hr-dotted hr18"></div>
                    <div class="row">
                        <div class="widget-box transparent">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title lighter">
                                    <i class="ace-icon fa fa-envelope red"></i>
                                    Email alerts
                                </h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-4">
                                    <div class="control-group form-inline">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="email_notifications[plays]" class="ace"
                                                       id="email_notifications[plays]" <%= renderCheckbox(email_notifications.plays) %>>
                                                <span class="lbl"> Plays</span>
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="email_notifications[likes]" class="ace"
                                                       id="email_notifications[likes]" <%= renderCheckbox(email_notifications.likes) %>>
                                                <span class="lbl"> Likes</span>
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="email_notifications[favourites]" class="ace"
                                                       id="email_notifications[favourites]" <%= renderCheckbox(email_notifications.favourites) %>>
                                                <span class="lbl"> Favourites</span>
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="email_notifications[comments]" class="ace"
                                                       id="email_notifications[comments]" <%= renderCheckbox(email_notifications.comments) %>>
                                                <span class="lbl"> Comments</span>
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="email_notifications[follows]" class="ace"
                                                       id="email_notifications[follows]" <%= renderCheckbox(email_notifications.follows) %>>
                                                <span class="lbl"> Follows</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="row">
        <div class="form-actions">
            <button id="save-changes" class="btn">Save changes</button>
        </div>
    </div>
</div>
