<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>

    <!--
    <div class="panel-body">
        <div class="text-center">
            Allowed custom attributes:
            {{ allowed_custom_attributes }}
        </div>
    </div>
    -->

    <div ng-show="allowed_custom_attributes.hasOwnProperty('set') || allowed_custom_attributes.hasOwnProperty('delete')">
        <h3 translate>Custom attributes for user {{ username }}</h3>
        <table class="table table-hover">
            <tr ng-repeat="(attribute_key, attribute_value) in custom_attributes">
                <td class="col-sm-4">
                    <b>{{ attribute_key }}</b>
                </td>
                <td  class=col-sm-4>
                    {{ attribute_value }}
                </td>
                <td  class=col-sm-2>
                    <button ng-click="deleteCustomAttribute(attribute_key)"
                            ng-show="allowed_custom_attributes['delete'].includes(attribute_key) || allowed_custom_attributes['delete'].includes('*')"
                            class="btn btn-danger">Delete</button>
                </td>
            </tr>
        </table>
        <div ng-show="allowed_custom_attributes.hasOwnProperty('set')">
        <h4 translate>Add custom attribute</h4>
            <table class="table table-hover">
             <tr>
            <td class="col-sm-4">
                <select class="form-control"
                    id="attr_key"
                    ng-change="onCustomAttributeKeyChange()"
                    ng-model="selected_attr_key"
                    ng-options = "attribute_key as attribute_key for (attribute_key, attribute_values) in allowed_custom_attributes['set']"
                >
                </select>
                <label class="sr-only" for="new_custom_attribute_key" translate="Custom attribute name"></label>
                <input class="form-control"
                       ng-show="selected_attr_key==='*'"
                       ng-model="new_custom_attribute_key"
                       id="new_custom_attribute_key"
                       placeholder="Custom attribute name">
            </td>
            <td class="col-sm-4">
                <select class="form-control"
                        ng-show="customAttributeValueSelectVisible"
                    id="attr_value"
                    ng-model="selected_attr_value"
                    ng-options = "attribute_value as attribute_value for attribute_value in allowed_values"
                >
                </select>
                <input class="form-control"
                       ng-show="selected_attr_value==='*'"
                       ng-model="new_custom_attribute_value">
            </td>
            <td class="col-sm-2">
                <button ng-click="addCustomAttribute()"
                        ng-enables="new_custom_attribute_key || selected_attr_key"
                        class="btn btn-success">Add</button>
            </td>
             </tr>
            </table>
        </div>
    </div>

    <h3 translate>Tokens for user {{ username }}</h3>
    <!-- Tokens for user -->
    <div uib-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()"></div>

    <div class="table-responsive form-group">
        <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"
                ng-disabled="!checkEnroll()"
                id="enrollButton"
                translate>Enroll New Token
        </button>
    </div>

    <div ng-show="checkRight('assign')">
        <h3 translate>Assign a new token {{ newToken.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>
