<div class="col-md-6">
    <div class="block">
        <div class="block-title">
            <h2><strong>My Details</strong></h2>
        </div>
        <form class="form-horizontal form-bordered">
            <div class="fieldset">
                <div class="form-group">
                    <div class="col-md-4">
                        <label class="control-label">Display Name</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" ng-model="vm.user.display_name" ng-blur="updateUser()" class="form-control"/>
                    </div>
                </div>
                <div ng-class="{'has-error': vm.slugError}" class="form-group">
                    <div class="col-md-4">
                        <label class="control-label">Profile Url</label>
                    </div>
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" ng-model="vm.tempSlug" ng-change="checkSlug()" ng-blur="saveSlug()"
                                   class="form-control"/><span class="input-group-addon"><i
                                ng-class="{'fa-spin': vm.slugChanging || vm.slugError,  'text-danger': vm.slugError}"
                                class="fa fa-asterisk"></i></span>
                        </div>
                        <span ng-show="!vm.slugError"
                              class="help-block">Your profile URL will be /users/{{vm.tempSlug}}</span><span
                            ng-show="vm.slugError" class="help-block animation-slideDown">Slug must be unique</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-4">
                        <label class="control-label">Email Address</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" ng-model="vm.user.email" ng-blur="updateUser()" class="form-control"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <section class="panel">
        <header class="panel-heading tab-bg-dark-navy-blue">
            <ul class="nav nav-tabs" id="settings-tab">
                <li class="active">
                    <a data-toggle="tab" href="#sharing" aria-expanded="true">
                        <i class="ace-icon fa fa-share green"></i> Sharing
                    </a>
                </li>
                <li class="">
                    <a data-toggle="tab" href="#notifications" aria-expanded="false">
                        <i class="ace-icon fa fa-envelope green"></i> Notifications
                    </a>
                </li>
                <li class="">
                    <a data-toggle="tab" href="#podcasts" aria-expanded="false">
                        <i class="ace-icon fa fa-rss green"></i> Podcasts
                    </a>
                </li>
            </ul>
        </header>
        <div class="panel-body">
            <div class="tab-content tasi-tab">
                <div id="sharing" class="tab-pane active">
                    <form class="form-horizontal form-bordered">
                        <div class="form-group">
                            <label class="col-md-2 control-label"><i class="fa fa-facebook"></i> Facebook</label>
                            <div class="col-md-10">
                                <label ng-repeat="item in sharing_options" ng-model="vm.user.activity_sharing_facebook"
                                       checkbox-bitfield="" ng-change="updateUser()" class="radio-inline">
                                    <input type="checkbox" value="{{item.power}}"/> {{item.abbr}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"><i class="fa fa-twitter"></i> Twitter</label>
                            <div class="col-md-10">
                                <label ng-repeat="item in sharing_options" ng-model="vm.user.activity_sharing_twitter"
                                       checkbox-bitfield="" ng-change="updateUser()" class="radio-inline">
                                    <input type="checkbox" value="{{item.power}}"/> {{item.abbr}}
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="notifications" class="tab-pane">
                    <form class="form-horizontal form-bordered">
                        <div class="form-group">
                            <label ng-repeat="item in sharing_options" ng-model="vm.user.email_notifications"
                                   checkbox-bitfield=""
                                   ng-change="updateUser()" class="radio-inline">
                                <input type="checkbox" value="{{item.power}}"/> {{item.abbr}}
                            </label>
                        </div>
                    </form>
                </div>
                <div id="podcasts" class="tab-pane">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-3 col-sm-3 control-label">Favourites</label>
                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input id="podcast-url-favourites" type="text" ng-model="podcastUrlFavourites"
                                           class="form-control" readonly="true" >
                                    <span class="input-group-btn">
                                        <button class="btn btn-white" type="button"
                                                ngclipboard data-clipboard-target="#podcast-url-favourites">
                                            <i class="fa fa-copy"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 col-sm-3 control-label">Following</label>
                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" disabled="true" >
                                    <span class="input-group-btn">
                                        <button class="btn btn-white" type="button">Go!</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

</div>
<div class="col-md-6">
    <div class="block">
        <div class="block-title">
            <div class="block-options pull-right"><a ng-click="updateUser()" class="btn btn-alt btn-sm btn-default"><i
                    class="fa fa-save"></i></a></div>
            <h2><strong>My Description</strong>
                <small>This is experimental feedback appreciated</small>
            </h2>
        </div>
        <form class="form-horizontal form-bordered">
            <fieldset>
                <div class="form-group">
                    <div class="col-xs-12">
                        <textarea dss-ckeditor="dss-ckeditor" on-change="updateDescription()"
                                  ng-model="vm.user.description" blur="updateUser()" ng-blur="updateUser()"></textarea>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>