<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 class="form-group">
                <label for="username" translate>Username</label>

                <div name="username">{{ User.username }}</div>
            </div>
            <div class="form-group">
                <label for="givenname" translate>Given name</label>

                <div name="givenname"
                     ng-hide="editUser">{{ User.givenname }}</div>
                <input name="givenname" class="form-control"
                       ng-model="User.givenname"
                       ng-show="editUser">
            </div>
            <div class="form-group">
                <label for="surname" translate>Surname</label>

                <div name="surname" ng-hide="editUser">{{ User.surname }}</div>
                <input name="surname" class="form-control"
                       ng-model="User.surname"
                       ng-show="editUser">
            </div>
            <div class="form-group">
                <label for="description" translate>Description</label>

                <div name="description"
                     ng-hide="editUser">{{ User.description }}</div>
                <input name="description" class="form-control"
                       ng-model="User.description"
                       ng-show="editUser">
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="email" translate>Email</label>

                <div name="email" ng-hide="editUser">
                    <a href="mailto:{{ User.email }}">
                        {{ User.email }}</a></div>
                <input name="email" class="form-control"
                       ng-model="User.email"
                       ng-show="editUser">
            </div>
            <div class="form-group">
                <label for="phone" translate>Phone</label>

                <div name="phone" ng-hide="editUser">{{ User.phone }}</div>
                <input name="phone" class="form-control"
                       ng-model="User.phone"
                       ng-show="editUser">
            </div>
            <div class="form-group">
                <label for="mobile" translate>Mobile</label>

                <div name="mobile" ng-hide="editUser">{{ User.mobile }}</div>
                <input name="mobile" class="form-control"
                       ng-model="User.mobile"
                       ng-show="editUser">
            </div>
            <div class="form-group" ng-show="editUser">
                <label for="password" translate>Password</label>
                <input type="password" name="password" class="form-control"
                       ng-model="User.password">
            </div>
        </div>
    </div>

    <div class="text-center" ng-show="editable">
        <button ng-click="editUser=true" class="btn btn-primary"
                ng-show="!editUser && checkRight('updateuser')">
            <div class="glyphicon glyphicon-edit" translate>Edit user
            </div>
        </button>
        <button ng-click="editUser=false; updateUser()" class="btn btn-primary"
                ng-show="editUser">
            <div class="glyphicon glyphicon-save" translate>Save user
            </div>
        </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')">
            <div class="glyphicon glyphicon-trash" translate>Delete user
            </div>
        </button>
    </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 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>
