
<div class="main-content-wrapper">

    <span loading="model.loading"></span>

    <div class="main-content" ng-if="!model.loading">

        <div class="header">

            <div class="pull-right">
                <button class="btn btn-clean" ng-click="showChangePasswordModal()">
                    <span>{{'IDM.PROFILE-MGMT.CHANGE-PASSWORD' | translate}}</span>
                </button>
            </div>

            <div style="float:left; width:60px;">
                <img ng-src="{{restRootUrl()}}/rest/admin/profile-picture?{{cacheBuster()}}"
                     style="width:60px; height: 60px;"
                     class="img-thumbnail clickable"
                     ng-click="showUploadPictureModal()">
            </div>

            <div>
                <h2 style="margin-left:70px;margin-top:15px;">{{model.profile.firstName}} {{model.profile.lastName}}</h2>
            </div>

        </div>

        <div class="content" auto-height offset="6">

            <div style="margin-left:15px;">
                <h2>{{'IDM.PROFILE-MGMT.DETAILS' | translate}}</h2>
                <h5>{{'IDM.PROFILE-MGMT.DETAILS-DESCRIPTION' | translate}}</h5>
            </div>

            <div class="row section">

                <div class="col-xs-12">

                    <div>

                        <h4 class="control-label">{{'IDM.PROFILE-MGMT.FIRST-NAME' | translate}}</h4>

                        <div ng-if="!model.editingFirstName" class="profile-detail"
                             ng-click="model.editingFirstName = true">
                            <span ng-if="model.profile.firstName != null  && model.profile.firstName !== undefined">{{model.profile.firstName}}</span>
                            <span ng-if="model.profile.firstName == null || model.profile.firstName == undefined || model.profile.firstName == ''" class="nothing-to-see">{{'IDM.PROFILE-MGMT.NOTHING-SET' | translate}}</span>
                        </div>
                        <div class="form-group" ng-if="model.editingFirstName">
                            <input type="text" class="form-control" auto-focus ng-model="model.profile.firstName"
                                   ng-blur="firstNameChanged()"
                                   custom-keys enter-pressed="firstNameChanged()">
                        </div>

                        <h4 class="control-label">{{'IDM.PROFILE-MGMT.LAST-NAME' | translate}}</h4>

                        <div ng-if="!model.editingLastName" class="profile-detail"
                             ng-click="model.editingLastName = true">
                            <span ng-if="model.profile.lastName != null && model.profile.lastName !== undefined">{{model.profile.lastName}}</span>
                            <span ng-if="model.profile.lastName == null || model.profile.lastName == undefined || model.profile.lastName == ''" class="nothing-to-see">{{'IDM.PROFILE-MGMT.NOTHING-SET' | translate}}</span>
                        </div>
                        <div class="form-group" ng-if="model.editingLastName">
                            <input type="text" class="form-control" auto-focus ng-model="model.profile.lastName"
                                   ng-blur="lastNameChanged()"
                                   custom-keys enter-pressed="lastNameChanged()">
                        </div>

                        <h4 class="control-label">
                            <span>{{'IDM.PROFILE-MGMT.EMAIL' | translate}}</span>
                            <span ng-if="model.profile.emailErrorMessage" style="color:red; font-size: 12px">{{model.profile.emailErrorMessage | translate}}</span>
                        </h4>

                        <div ng-if="!model.editingEmail" class="profile-detail" ng-click="model.editingEmail = true">
                            <span ng-if="model.profile.email != null && model.profile.email != undefined">{{model.profile.email}}</span>
                            <span ng-if="model.profile.email == null || model.profile.email == undefined" class="nothing-to-see">{{'IDM.PROFILE-MGMT.NOTHING-SET' | translate}}</span>
                            {{model.profile.emailErrorMessage | translate}}
                        </div>
                        <div class="form-group" ng-if="model.editingEmail">
                            <input type="text" class="form-control" auto-focus ng-model="model.profile.email"
                                   ng-blur="emailChanged()"
                                   custom-keys enter-pressed="emailChanged()">
                        </div>

                    </div>
                </div>

            </div>

            <div clas="section" class="col-xs-12" ng-if="model.profile.groups && model.profile.groups.length > 0">

                <h2>{{'IDM.PROFILE-MGMT.GROUPS' | translate}}</h2>
                <ul class="simple-list">
                    <li ng-repeat="group in model.profile.groups">
                        <span style="margin-right: 5px;" class="glyphicon glyphicon-folder-close"></span>
                        <span>{{group.name}}</span>
                    </li>
                </ul>
            </div>


        </div>

    </div>

</div>