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

    <span ng-show="checkRight('eventhandling_write')">
    <button class="btn btn-danger"
            ng-click="disableEvent(eventid)"
            ng-show="form.active" translate>
        Disable
    </button>
    <button class="btn btn-success"
            ng-click="enableEvent(eventid)"
            ng-show="!form.active" translate>
        Enable
    </button>
    <button class="btn btn-danger"
        ng-click="delEvent(eventid)">
        <span class="glyphicon glyphicon-trash"></span>
        <span translate>Delete</span>
    </button>
    </span>
</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="name" class="col-sm-3 control-label" translate>
            Description</label>
        <div class="col-sm-6">
            <input id="name" class="form-control"
                   ng-model="form.name"
                   placeholder="Name"
                   required/>
        </div>
    </div>

    <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="handlerModuleChanged()"
                    >
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="ordering" class="col-sm-3 control-label" translate>
            Order</label>
        <div class="col-sm-6">
            <input type="number" ng-model="form.ordering"
                           class="form-control" min="0" />
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#condition" target="_self"
               data-toggle="tab" translate>Condition</a>
        </li>
        <li>
            <a href="#action" target="_self"
               data-toggle="tab" translate>Action</a>
        </li>

    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="condition">
            <h3 translate>Condition</h3>
            <table class="table table-hover">
                <tr ng-repeat="(conditionname, condition) in handlerConditions">
                    <td>
                        <label for="cb_{{ conditionname }}">
                            <input type="checkbox" name="{{ conditionname }}"
                                   ng-model="conditionCheckBox[conditionname]"
                                   id="cb_{{ conditionname }}">
                            {{ conditionname }}
                        </label>
                    </td>
                    <td>
                        <select class="form-control"
                                ng-if="condition.type!=='multi' && condition.value"
                                ng-disabled="!conditionCheckBox[conditionname]"
                                ng-required="condition.required && condition.value"
                                ng-model="conds[conditionname]"
                                ng-options="value for value in condition.value">
                        </select>
                        <div isteven-multi-select
                             ng-if="condition.type==='multi'"
                             ng-disabled="!conditionCheckBox[conditionname]"
                             input-model="condition.value"
                             output-model="conds[conditionname]"
                             button-label="icon name"
                             item-label="icon name maker"
                             tick-property="ticked">
                        </div>
                        <textarea type="text" rows="6"
                                  ng-disabled="!conditionCheckBox[conditionname]"
                                  ng-required="condition.required && !condition.value"
                                  ng-if="condition.type==='text' && !condition.value"
                                  class="form-control"
                                  ng-model="conds[conditionname]">
                        </textarea>
                        <input class="form-control"
                               ng-disabled="!conditionCheckBox[conditionname]"
                               ng-required="condition.required && !condition.value"
                               ng-model="conds[conditionname]"
                               ng-if="(condition.type==='str' && !condition.value)
                            || condition.type==='regexp'">
                        <p class="help help-block"
                           ng-disabled="!conditionCheckBox[conditionname]">
                            {{ condition.desc }}
                        </p>
                    </td>
                </tr>
            </table>
        </div>

        <div class="tab-pane" id="action">
            <h3 translate>Action</h3>
            <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 -->
            <h4 translate>Options</h4>
            <table class="table table-hover">
                <tr ng-repeat="(optionname, option) in options"
                    ng-show="!option.visibleIf ||
                     opts[option.visibleIf]===option.visibleValue">
                    <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">

                        <input type="checkbox"
                               ng-model="opts[optionname]"
                               ng-show="option.type==='bool' && !option.value">
                        <p class="help help-block">
                            {{ option.description }}
                        </p>
                    </td>
                </tr>
            </table>
        </div>
    </div>


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

</form>
