<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <ol class="breadcrumb">
        <li><a href="#/realms/{{realm.realm}}/users">{{:: 'users' | translate}}</a></li>
        <li>{{user.username}}</li>
    </ol>

    <kc-tabs-user></kc-tabs-user>

    <form class="form-horizontal" name="userForm" novalidate>
        <fieldset class="border-top">
            <legend><span class="text">{{:: 'manage-credentials' | translate}}</span></legend>
            <table class="datatable table table-bordered dataTable no-footer credentials-table">
                <thead>
                    <tr>
                        <th>{{:: 'position' | translate}}</th>
                        <th>{{:: 'type' | translate}}</th>
                        <th>{{:: 'user-label' | translate}}</th>
                        <th>{{:: 'data' | translate}}</th>
                        <th colspan="2">{{:: 'actions' | translate}}</th>
                    </tr>
                </thead>
                <tr ng-repeat="credential in credentials">
                    <td>
                        <button data-ng-disabled="$first" class="btn btn-default btn-sm" data-ng-click="moveUp(credentials, $index)"><i class="fa fa-angle-up"></i></button>
                        <button data-ng-disabled="$last" class="btn btn-default btn-sm" data-ng-click="moveDown(credentials, $index)"><i class="fa fa-angle-down"></i></button>
                    </td>
                    <td>
                        <b>{{credential.type}}</b>
                    </td>
                    <td class="credential-label-cell">
                        <input type="text" class="form-control" data-ng-model="credential.userLabel"/>
                    </td>
                    <td class="credential-data-cell">
                        <a data-ng-show="!showData[credential.id]" data-ng-click="showData[credential.id] = true">
                            {{:: 'show-data' | translate}}
                        </a>
                        <table class="datatable table dataTable no-footer credential-data-table" data-ng-show="showData[credential.id]">
                            <tr ng-repeat="key in keys(credential.credentialData) | orderBy">
                                <td class="key">{{key}}</td>
                                <td class="value">{{credential.credentialData[key]}}</td>
                            </tr>
                        </table>
                    </td>
                    <td class="credential-action-cell" ng-class="{true:'expanded'}[showData[credential.id]]" >
                        <div class="kc-action-cell" data-ng-click="deleteCredential(credential)">
                            {{:: 'delete' | translate}}
                        </div>
                    </td>
                    <td class="credential-action-cell" ng-class="{true:'expanded'}[showData[credential.id]]" >
                        <div class="kc-action-cell" data-ng-click="updateCredentialLabel(credential)">
                            {{:: 'save' | translate}}
                        </div>
                    </td>
                </tr>
            </table>
        </fieldset>

        <fieldset class="border-top" data-ng-show="!hasPassword">
            <legend><span class="text">{{:: 'set-password' | translate}}</span></legend>
            <div class="form-group">
                    <label class="col-md-2 control-label" for="newPas">{{:: 'password' | translate}} <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-md-6">
                        <input class="form-control" kc-password type="text" id="newPas" name="newPas" data-ng-model="password" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="confirmPas">{{:: 'password-confirmation' | translate}} <span class="required" data-ng-show="create">*</span></label>
                    <div class="col-md-6">
                        <input class="form-control" kc-password id="confirmPas" name="confirmPas" data-ng-model="confirmPassword" required>
                    </div>
                </div>

                <div class="form-group clearfix block">
                    <label class="col-md-2 control-label" for="temporaryPassword">{{:: 'temporary' | translate}}</label>
                    <div class="col-sm-6">
                        <input ng-model="temporaryPassword" name="temporaryPassword" id="temporaryPassword" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
                    </div>
                    <kc-tooltip>{{:: 'credentials.temporary.tooltip' | translate}}</kc-tooltip>
                </div>

                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <button data-ng-disabled="!passwordAndConfirmPasswordEntered()" class="btn btn-default" type="submit" data-ng-click="resetPassword(true)">{{:: 'set-password' | translate}}</button>
                    </div>
                </div>
            </fieldset>

        <fieldset class="border-top" data-ng-show="user.disableableCredentialTypes && user.disableableCredentialTypes.length > 0">
            <legend><span class="text">{{:: 'disable-credentials' | translate}}</span></legend>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="credentialTypeList">{{:: 'disableable-credential-types' | translate}}</label>

                <div class="col-md-6">
                    <select ui-select2 id="credentialTypeList" ng-model="disableableCredentialTypes" data-placeholder="{{:: 'select-a-type.placeholder' | translate}}" multiple>
                        <option ng-repeat="credType in user.disableableCredentialTypes" value="{{credType}}">{{credType}}</option>
                    </select>
                </div>
                <kc-tooltip>{{:: 'credentials.disableable.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="disableCredentialTypes">{{:: 'disable-credential-types' | translate}}</label>

                <div class="col-md-6">
                    <button data-ng-disabled="disableableCredentialTypes.length === 0" type="button" id="disableCredentialTypes" class="btn btn-default" data-ng-click="disableCredentialTypes()">{{:: 'disable' | translate}}</button>
                </div>
                <kc-tooltip>{{:: 'credentials.disable.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>

        <fieldset class="border-top" data-ng-show="user.email">
            <legend><span class="text">{{:: 'credential-reset-actions' | translate}}</span></legend>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="reqActions">{{:: 'reset-actions' | translate}}</label>

                <div class="col-md-6">
                    <select ui-select2 id="reqActions" ng-model="emailActions" data-placeholder="{{:: 'select-an-action.placeholder' | translate}}" multiple>
                        <option ng-repeat="action in userReqActionList" value="{{action.alias}}">{{action.name}} ({{action.alias}})</option>
                    </select>
                </div>
                <kc-tooltip>{{:: 'credentials.reset-actions.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="reqActionsEmailTimeout">{{:: 'credential-reset-actions-timeout' | translate}}</label>

                <div class="col-md-6 time-selector">
                    <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="emailActionsTimeout.time"
                           id="reqActionsEmailTimeout" name="reqActionsEmailTimeout">
                    <select class="form-control" name="reqActionsEmailTimeoutUnit" data-ng-model="emailActionsTimeout.unit">
                        <option value="Minutes">{{:: 'minutes' | translate}}</option>
                        <option value="Hours">{{:: 'hours' | translate}}</option>
                        <option value="Days">{{:: 'days' | translate}}</option>
                    </select>
                </div>
                <kc-tooltip>{{:: 'credential-reset-actions-timeout.tooltip' | translate}}</kc-tooltip>
            </div>
            <div class="form-group clearfix">
                <label class="col-md-2 control-label" for="reqActionsEmail">{{:: 'reset-actions-email' | translate}}</label>

                <div class="col-md-6">
                    <button data-ng-disabled="emailActions.length === 0" type="button" id="reqActionsEmail" class="btn btn-default" data-ng-click="sendExecuteActionsEmail()">{{:: 'send-email' | translate}}</button>
                </div>
                <kc-tooltip>{{:: 'credentials.reset-actions-email.tooltip' | translate}}</kc-tooltip>
            </div>
        </fieldset>
    </form>
</div>

<kc-menu></kc-menu>
