<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h1><strong>Events</strong> {{realm.realm|capitalize}}</span> Events</h1>

    <ul class="nav nav-tabs">
        <li data-ng-class="(path[2] == 'events') && 'active'"><a href="#/realms/{{realm.realm}}/events">View</a></li>
        <li data-ng-class="(path[2] == 'events-settings') && 'active'"><a href="#/realms/{{realm.realm}}/events-settings">Config</a></li>
    </ul>

    <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="enabled">Save Events</label>
                <div class="col-md-6">
                    <input ng-model="eventsConfig.eventsEnabled" name="enabled" id="enabled" onoffswitch />
                </div>
                <kc-tooltip>If enabled events are saved to the database which makes events available to the admin and account management consoles.</kc-tooltip>
            </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>

                <kc-tooltip>Configure what event types are saved. By default events related to login and users modifying their accounts are persisted.</kc-tooltip>
            </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>
                <kc-tooltip>Deletes all events in the database.</kc-tooltip>
            </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 form-inline">
                    <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>Minutes</option>
                        <option>Hours</option>
                        <option>Days</option>
                    </select>
                </div>
                <div class="col-sm-1"></div>
                <kc-tooltip>Sets the expiration for events. Expired events are periodically deleted from the database.</kc-tooltip>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="eventsListeners" class="control-label">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>

                <kc-tooltip>Configure what listeners receive events for the realm.</kc-tooltip>
            </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>

<kc-menu></kc-menu>
