<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h1>
        <span>{{:: 'events-config' | translate}}</span>
        <kc-tooltip>{{:: 'events-config.tooltip' | translate}}</kc-tooltip>
    </h1>

    <ul class="nav nav-tabs">
        <li data-ng-class="(path[2] == 'events') && 'active'"><a href="#/realms/{{realm.realm}}/events">{{:: 'login-events' | translate}}</a></li>
        <li data-ng-class="(path[2] == 'admin-events') && 'active'"><a href="#/realms/{{realm.realm}}/admin-events">{{:: 'admin-events' | translate}}</a></li>
        <li data-ng-class="(path[2] == 'events-settings') && 'active'"><a href="#/realms/{{realm.realm}}/events-settings">{{:: 'config' | translate}}</a></li>
    </ul>
    <div id="content">
        <h2>{{:: 'events-config' | translate}}</h2>

        <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageEvents">

            <fieldset class="border-top">
                <div class="form-group">
                    <label class="col-md-2 control-label" for="eventsListeners" class="control-label">{{:: 'event-listeners' | translate}}</label>
                    <kc-tooltip>{{:: 'event-listeners.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <input ui-select2="eventsConfigSelectOptions" id="eventsListeners" ng-model="eventsConfig.eventsListeners" data-placeholder="{{:: 'select-an-action.placeholder' | translate}}"/>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend><span class="text">{{:: 'login-events-settings' | translate}}</span></legend>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="enabled">{{:: 'save-events' | translate}}</label>
                    <kc-tooltip>{{:: 'login.save-events.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <input ng-model="eventsConfig.eventsEnabled" name="enabled" id="enabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                    </div>
                </div>

                <div class="form-group" data-ng-show="eventsConfig.eventsEnabled">
                    <label class="col-md-2 control-label" for="enabledEventTypes" class="control-label">{{:: 'saved-types' | translate}}</label>
                    <kc-tooltip>{{:: 'saved-types.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <input ui-select2="eventSelectOptions" id="enabledEventTypes" ng-model="eventsConfig.enabledEventTypes" data-placeholder="{{:: 'select-event-types.placeholder' | translate}}"/>
                    </div>
                </div>

                <div class="form-group" data-ng-show="access.manageEvents && eventsConfig.eventsEnabled">
                    <label class="col-md-2 control-label" for="password">{{:: 'clear-events' | translate}}</label>
                    <kc-tooltip>{{:: 'clear-events.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <button class="btn btn-danger" type="submit" data-ng-click="clearEvents()" >{{:: 'clear-events' | translate}}</button>
                    </div>
                </div>
                <div class="form-group" data-ng-show="eventsConfig.eventsEnabled">
                    <label class="col-md-2 control-label" for="expiration">{{:: 'expiration' | translate}}</label>
                    <kc-tooltip>{{:: 'events.expiration.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6 time-selector">
                        <input class="form-control" type="number" data-ng-model="eventsConfig.eventsExpiration" id="expiration" name="expiration" min="0"/>
                        <select class="form-control" name="expirationUnit" data-ng-model="eventsConfig.expirationUnit">
                            <option value="Minutes">{{:: 'minutes' | translate}}</option>
                            <option value="Hours">{{:: 'hours' | translate}}</option>
                            <option value="Days">{{:: 'days' | translate}}</option>
                        </select>
                    </div>
                </div>
            </fieldset>


            <fieldset>
                <legend><span class="text">{{:: 'admin-events-settings' | translate}}</span></legend>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="adminEventsEnabled">{{:: 'save-events' | translate}}</label>
                    <kc-tooltip>{{:: 'admin.save-events.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <input ng-model="eventsConfig.adminEventsEnabled" name="adminEventsEnabled" id="adminEventsEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                    </div>
                </div>

                <div class="form-group" data-ng-show="eventsConfig.adminEventsEnabled">
                    <label class="col-md-2 control-label" for="adminEventsDetailsEnabled">{{:: 'include-representation' | translate}}</label>
                    <kc-tooltip>{{:: 'include-representation.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <input ng-model="eventsConfig.adminEventsDetailsEnabled" name="adminEventsDetailsEnabled" id="adminEventsDetailsEnabled" onoffswitch on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}"/>
                    </div>
                </div>
                
                <div class="form-group" data-ng-show="access.manageEvents && eventsConfig.adminEventsEnabled">
                    <label class="col-md-2 control-label" for="password">{{:: 'clear-admin-events' | translate}}</label>
                    <kc-tooltip>{{:: 'clear-admin-events.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6">
                        <button class="btn btn-danger" type="submit" data-ng-click="clearAdminEvents()" >{{:: 'clear-admin-events' | translate}}</button>
                    </div>
                </div>
                <div class="form-group" data-ng-show="eventsConfig.adminEventsEnabled">
                    <label class="col-md-2 control-label" for="expiration">{{:: 'expiration' | translate}}</label>
                    <kc-tooltip>{{:: 'events.expiration.tooltip' | translate}}</kc-tooltip>
                    <div class="col-md-6 time-selector">
                        <input class="form-control" type="number" data-ng-model="realm.attributes.adminEventsExpiration" id="adminEventsExpiration" name="adminEventsExpiration" min="0"/>
                        <select class="form-control" name="adminEventsExpirationUnit" data-ng-model="realm.attributes.adminEventsExpirationUnit">
                            <option value="Minutes">{{:: 'minutes' | translate}}</option>
                            <option value="Hours">{{:: 'hours' | translate}}</option>
                            <option value="Days">{{:: 'days' | translate}}</option>
                        </select>
                    </div>
                </div>
            </fieldset>

            <div class="form-group" data-ng-show="access.manageEvents">
                <div class="col-md-10 col-md-offset-2">
                    <button data-kc-reset data-ng-disabled="!changed">{{:: 'clear-changes' | translate}}</button>
                    <button data-kc-save data-ng-disabled="!changed">{{:: 'save' | translate}}</button>
                </div>
            </div>
        </form>
    </div>
</div>
<kc-menu></kc-menu>