<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h1>
        <span><strong>Events Config</strong> {{realm.realm|capitalize}}</span>
        <kc-tooltip>Displays configuration options to enable persistence of user and admin events.</kc-tooltip>
    </h1>

    <ul class="nav nav-tabs">
        <li data-ng-class="(path[2] == 'events') && 'active'"><a href="#/realms/{{realm.realm}}/events">Login Events</a></li>
        <li data-ng-class="(path[2] == 'admin-events') && 'active'"><a href="#/realms/{{realm.realm}}/admin-events">Admin Events</a></li>
        <li data-ng-class="(path[2] == 'events-settings') && 'active'"><a href="#/realms/{{realm.realm}}/events-settings">Config</a></li>
    </ul>
    <div id="content">
        <h2><span>{{realm.realm}}</span> Events Config</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</label>

                    <div class="col-md-6">
                        <select ui-select2 ng-model="eventsConfig.eventsListeners" data-placeholder="Select an action..." multiple>
                            <option ng-repeat="listener in eventListeners" value="{{listener}}">{{listener}}</option>
                        </select>
                    </div>

                    <span tooltip-placement="right" tooltip="Configure what listeners receive events for the realm." class="fa fa-info-circle"></span>
                </div>
            </fieldset>

            <fieldset>
                <legend><span class="text">Login Events Settings</span></legend>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="enabled">Save Events</label>
                    <div class="col-md-6">
                        <input ng-model="eventsConfig.eventsEnabled" name="enabled" id="enabled" onoffswitch />
                    </div>
                    <span tooltip-placement="right" tooltip="If enabled login events are saved to the database which makes events available to the admin and account management consoles." class="fa fa-info-circle"></span>
                </div>

                <div class="form-group" data-ng-show="eventsConfig.eventsEnabled">
                    <label class="col-md-2 control-label" for="enabledEventTypes" class="control-label">Saved Types</label>

                    <div class="col-md-6">
                        <input ui-select2="eventSelectOptions" id="enabledEventTypes" ng-model="eventsConfig.enabledEventTypes" data-placeholder="Select event types..."/>
                    </div>

                    <span tooltip-placement="right" tooltip="Configure what event types are saved. By default events related to login and users modifying their accounts are persisted." class="fa fa-info-circle"></span>
                </div>

                <div class="form-group" data-ng-show="access.manageEvents && eventsConfig.eventsEnabled">
                    <label class="col-md-2 control-label" for="password">Clear Events</label>
                    <div class="col-md-6">
                        <button class="btn btn-danger" type="submit" data-ng-click="clearEvents()" >Clear Events</button>
                    </div>
                    <span tooltip-placement="right" tooltip="Deletes all events in the database." class="fa fa-info-circle"></span>
                </div>
                <div class="form-group input-select" data-ng-show="eventsConfig.eventsEnabled">
                    <label class="col-md-2 control-label" for="expiration">Expiration</label>
                    <div class="col-md-6">
                        <input class="form-control" type="number" data-ng-model="eventsConfig.eventsExpiration" id="expiration" name="expiration" min="0"/>
                    </div>
                    <div class="col-md-2 select-kc">
                        <select name="expirationUnit" data-ng-model="eventsConfig.expirationUnit" >
                            <option>Minutes</option>
                            <option>Hours</option>
                            <option>Days</option>
                        </select>
                    <span tooltip-placement="right" tooltip="Sets the expiration for events. Expired events are periodically deleted from the database." class="fa fa-info-circle"></span>
                    </div>
                </div>
            </fieldset>


            <fieldset>
                <legend><span class="text">Admin Events Settings</span></legend>

                <div class="form-group">
                    <label class="col-md-2 control-label" for="adminEventsEnabled">Save Events</label>
                    <div class="col-md-6">
                        <input ng-model="eventsConfig.adminEventsEnabled" name="adminEventsEnabled" id="adminEventsEnabled" onoffswitch />
                    </div>

                    <span tooltip-placement="right" tooltip="If enabled admin events are saved to the database which makes events available to the admin console." class="fa fa-info-circle"></span>
                </div>

                <div class="form-group" data-ng-show="eventsConfig.adminEventsEnabled">
                    <label class="col-md-2 control-label" for="adminEventsDetailsEnabled">Include Representation</label>
                    <div class="col-md-6">
                        <input ng-model="eventsConfig.adminEventsDetailsEnabled" name="adminEventsDetailsEnabled" id="adminEventsDetailsEnabled" onoffswitch />
                    </div>

                    <span tooltip-placement="right" tooltip="Include JSON representation for create and update requests." class="fa fa-info-circle"></span>
                </div>
                
                <div class="form-group" data-ng-show="access.manageEvents && eventsConfig.adminEventsEnabled">
                    <label class="col-md-2 control-label" for="password">Clear Admin Events</label>
                    <div class="col-md-6">
                        <button class="btn btn-danger" type="submit" data-ng-click="clearAdminEvents()" >Clear Admin Events</button>
                    </div>
                    <span tooltip-placement="right" tooltip="Deletes all admin events in the database." class="fa fa-info-circle"></span>
                </div>
                
            </fieldset>

                <div class="pull-right form-actions" data-ng-show="access.manageEvents">
                <button data-kc-reset data-ng-show="changed">Clear changes</button>
                <button data-kc-save data-ng-show="changed">Save</button>
            </div>
        </form>
    </div>
</div>
<kc-menu></kc-menu>