<div class="panel" ng-controller="userDetailsController">
    <!--
     The controller provides $scope.User with
        description: "PulseAudio daemon,,,"
        email: ""
        givenname: "PulseAudio"
        mobile: ""
        phone: ""
        surname: "daemon"
        userid: "115"
        username: "pulse"
    -->
    <h2>
        <translate>Details for user {{ username }} in realm</translate>
        <a ui-sref="config.realms.list">{{ realmname }}</a></h2>
    <a class="btn btn-default" ui-sref="audit.log({user: username})">
        <translate>View user in Audit log</translate>
    </a>
    </h2>

    <div class="panel-body">

        <div class="col-xs-6">
            <div ng-repeat="field in leftColumn">
                <ng-form name="formLeft" class="css-form">
                    <ng-include
                            src="instanceUrl+'/static/components/user/views/user.add.dynamic.form.fields.html'"></ng-include>
                </ng-form>
            </div>
        </div>
        <div class="col-xs-6">
            <div ng-repeat="field in rightColumn">
                <ng-form name="formLeft" class="css-form">
                    <ng-include
                            src="instanceUrl+'/static/components/user/views/user.add.dynamic.form.fields.html'"></ng-include>
                </ng-form>
            </div>
        </div>

    </div>

    <div class="panel-body">
        <div class="text-center" ng-show="editable">
            <button ng-click="editUser=true; getUserDetails()"
                    class="btn btn-primary"
                    ng-show="!editUser && checkRight('updateuser')">
                <span class="glyphicon glyphicon-edit"></span>
                <span translate>Edit user</span>
            </button>
            <button ng-click="editUser=false; updateUser()"
                    class="btn btn-primary"
                    ng-show="editUser">
                <span class="glyphicon glyphicon-save"></span>
                <span translate>Save user</span>
            </button>
            <button ng-click="editUser=false; getUserDetails()"
                    class="btn btn-danger"
                    ng-show="editUser" translate>Cancel
            </button>
            <button ng-click="deleteUserAsk()"
                    class="btn btn-danger"
                    ng-show="!editUser && checkRight('deleteuser')">
                <span class="glyphicon glyphicon-trash"></span>
                <span translate>Delete user</span>
            </button>
        </div>
    </div>

    <h3 translate>Tokens for user {{ username }}</h3>
    <!-- Tokens for user -->
    <pagination ng-show="tokendata.count > 5"
                total-items="tokendata.count" ng-model="params.page"
                items-per-page="{{ tokensPerPage }}"
                max-size="5"
                boundary-links="true" ng-change="pageChanged()"></pagination>

    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th translate>serial</th>
                <th translate>type</th>
                <th translate>Active</th>
                <th translate>window</th>
                <th translate>description</th>
                <th translate>failcounter</th>
                <th translate>maxfail</th>
                <th translate>otplen</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="token in tokendata.tokens">
                <td><a ui-sref="token.details({tokenSerial:token.serial,
            currentToken:token})"
                       ng-click="$rootScope.returnTo=user.list;">
                    {{ token.serial }}</a></td>
                <td>{{ token.tokentype }}</td>
                <td>
                <span class="label label-success" ng-show="token.active">
                    active
                </span>
                <span class="label label-danger" ng-hide="token.active">
                    disabled
                </span>
                </td>
                <td>{{ token.count_window }}</td>
                <td>{{ token.description }}</td>
                <td><span class="label"
                          ng-class="{'label-success': token.failcount==0,
                                    'label-warning': token.failcount>0,
                                    'label-danger': token.failcount>=token.maxfail}">
                    {{ token.failcount }}
                </span>
                </td>
                <td>{{ token.maxfail }}</td>
                <td>{{ token.otplen }}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <button ng-click="enrollToken()" class="btn btn-primary"
                id="enrollButton"
                translate>Enroll New Token
        </button>
    </div>

    <div ng-show="checkRight('assign')">
        <h3 translate>Assign a new token {{ newTokenObject.serial }}</h3>

        <form name="formAssignToken" role="form" validate>
            <div assign-token new-token-object="newToken"></div>
            <div class="text-center">
                <button type="button" ng-click="assignToken()"
                        id="assignButton"
                        ng-disabled="formAssignToken.$invalid"
                        class="btn btn-primary" translate>Assign Token
                </button>
            </div>
        </form>
    </div>

    <ng-include
            src="instanceUrl + '/static/components/user/views/dialog.ask_user_delete.html'">
    </ng-include>
</div>
