<h2 class="form-signin-heading"
    ng-show="eventid">
    <translate>Edit Event Handler {{ eventid }}</translate>
</h2>

<h2 class="form-signin-heading"
        ng-hide="eventid" translate>Create a new Event Handler</h2>

<form name="formEventAdd" role="form" validate
      class="form-horizontal">

    <div class="form-group">
        <label for="event" class="col-sm-3 control-label"
                translate>Events</label>

        <div class="col-sm-9">
            <div isteven-multi-select
                 required
                 input-model="availableEvents"
                 output-model="selectedEvents"
                 button-label="icon name"
                 item-label="icon name maker"
                 tick-property="ticked"
                    >
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="handlermodule" class="col-sm-3 control-label" translate>
            Handlermodule</label>
        <div class="col-sm-6">
            <select class="form-control"
                    id="handlermodule"
                    ng-model="form.handlermodule" required
                    ng-options="module for module in handlermodules"
                    ng-change="getHandlerActions()"
                    >
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="condition" class="col-sm-3 control-label" translate>
            Condition</label>
        <div class="col-sm-6">
            <input name="condition" id="condition" class="form-control"
                   ng-model="form.condition" placeholder=""
                   />
        </div>
    </div>

    <div class="form-group">
        <label for="action" class="col-sm-3 control-label" translate>
            Action</label>
        <div class="col-sm-6">
            <select class="form-control"
                    id="action"
                    ng-model="form.action" required
                    ng-options="action for action in handlerActions"
                    ng-change="actionChanged()"
                    >
            </select>
        </div>
    </div>
    <!-- options -->
    <h3 translate>Options</h3>
    <table class="table table-hover">
        <tr ng-repeat="(optionname, option) in options">
            <td>
                <b>{{ optionname }}</b>
            </td>
            <td>
                <select class="form-control"
                        ng-show="option.value"
                        ng-required="option.required && option.value"
                        ng-model="opts[optionname]"
                        ng-options="value for value in option.value">
                </select>
                <textarea type="text" rows="6"
                        ng-required="option.required && !option.value"
                        ng-show="option.type==='text' && !option.value"
                        class="form-control"
                        ng-model="opts[optionname]">
                </textarea>
                <input class="form-control"
                       ng-required="option.required && !option.value"
                       ng-model="opts[optionname]"
                       ng-show="option.type==='str' && !option.value">
                <p class="help help-block">
                    {{ option.description }}
                </p>
            </td>
        </tr>
    </table>


    <!-- button -->
    <div class="text-center"
         ng-show="checkRight('eventhandling_write')">
        <button ng-click="createEvent()"
                id="createEventButton"
                ng-disabled="formEventAdd.$invalid"
                class="btn btn-primary">
            <div class="glyphicon glyphicon-plus" translate>
                Create Event Handler Definition
            </div>
        </button>
    </div>

</form>
