<div data-ng-controller="ProfileController">
    <div>
        <fieldset>
            <legend class="ng-binding"><i class="icon-user"></i>&nbsp;{{'label.heading.userprofile' | translate}}
            </legend>
        </fieldset>
    </div>
    <div class="pull-right">
        <a href="#/admin/roles" has-permission='READ_ROLE' class="btn btn-primary ng-binding">{{ 'label.button.viewpermissions' | translate }}</a>
        <button type="button" class="btn btn-primary" data-ng-click="updatePassword()"><i
                class="icon-cog icon-white"></i>
            {{'label.button.changepassword' | translate}}
        </button>
    </div>
    <script type="text/ng-template" id="password.html">
        <div class="modal-header silver">
            <h3 class="bolder">{{'label.heading.changepassword' | translate}}</h3>
        </div>
        <api-validate></api-validate>
        <br>
        <div class="modal-body form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-4" for="password">{{ 'label.input.password' | translate }}<span
                        class="required">*</span></label>

                <div class="col-sm-5">
                    <input type="password" id="password" ng-model="formData.password" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4" for="repeatPassword">{{ 'label.input.repeatpassword' | translate
                    }}<span class="required">*</span></label>

                <div class="col-sm-5">
                    <input type="password" id="repeatPassword" ng-model="formData.repeatPassword" class="form-control"/>
                </div>
            </div>
        </div>

        <div class="modal-footer silver">
            <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
            <button class="btn btn-primary" ng-click="save()">{{'label.button.save' | translate}}</button>
        </div>
    </script>
    <div class="well">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <table class="table view-table table-bordered">
                    <tr>
                        <th>{{ 'label.heading.userid' | translate }}</th>
                        <td>{{userDetails.userId}}</td>
                    </tr>
                    <tr>
                        <th>{{ 'label.heading.username' | translate }}</th>
                        <td>{{userDetails.username}}</td>
                    </tr>
                    <tr>
                        <th>{{ 'label.heading.office' | translate }}</th>
                        <td>{{userDetails.officeName}}</td>
                    </tr>
                    <tr>
                        <th>{{ 'label.heading.status' | translate }}</th>
                        <td>{{status}}</td>
                    </tr>

                    <tr>
                        <th>{{ 'label.heading.language' | translate }}</th>
                        <td>{{optlang.name}}</td>
                    </tr>
                    <tr>
                        <th>{{ 'label.heading.primaryemail' | translate }}</th>
                        <td>{{user.email}}</td>
                    </tr>

                </table>
            </div>
            </div>
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <table class="table view-table table-bordered">
                    <tr class="graybg">
                        <th>{{ 'label.heading.role' | translate }}</th>
                        <th>{{ 'label.heading.description' | translate }}</th>
                    </tr>
                    <tr data-ng-repeat="role in userDetails.roles">
                        <td>{{role.name}}</td>
                        <td>{{role.description}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>