<div class="col-md-12">
    <ul class="breadcrumb">
        <li><a href="#/hooks">{{'label.anchor.managehooks' | translate}}</a></li>
        <li class="active">{{'label.anchor.createhook' | translate}}</li>
    </ul>
    <form name="createhookform" novalidate="" class="form-horizontal well" ng-controller="CreateHookController"
          rc-submit="submit()">
        <api-validate></api-validate>
        <fieldset>
            <legend>{{'label.heading.createhook' | translate}}</legend>
            <div class="form-group">
            <label class="control-label col-sm-2">{{'label.input.hooktemplate' | translate}}<span class="required">*</span></label>

                <div class="col-sm-3">
                    <select id="templateName" ng-model="template"
                            ng-options="template as template.name for template in templates" value="{{template.name}}"
                            ng-change="changeTemplate()" class="form-control width170px" required="required">
                        <option style="display:none" value="">{{'label.selecthooktemplate' | translate}}</option>
                    </select>
                </div>
            </div>

            <div class="form-group" ng-show="template">
            <label class="control-label col-sm-2" for="displayname">{{'label.input.displayname' | translate}}<span
                        class="required">*</span></label>

                <div class="col-sm-3">
                    <input type="text" id="displayname" name="displayname" ng-model="formData.displayName" class="form-control" required late-Validate/>
                </div>
                <div class="col-sm-3">
                    <form-validate valattributeform="createhookform" valattribute="displayname"/>
                </div>
            </div>

            <div class="form-group" ng-show="template">
            <label class="control-label col-sm-2">{{'label.input.active' | translate}}</label>
                <div class="col-sm-3">
                    <input type="checkbox" ng-model="formData.isActive"/>
                </div>
            </div>

            <div class="form-group" ng-show="template" ng-repeat="s in template.schema">
            <label class="control-label col-sm-2" ng-if="s.optional">{{s.fieldName}}</label>
            <label class="control-label col-sm-2" ng-if="s.optional == false">{{s.fieldName}} <span class="required">*</span></label>
                <div class="col-sm-3" ng-switch on="s.fieldType">
                    <input ng-switch-when="string" type="text" id="{{s.fieldName}}" name="{{s.fieldName}}" class="form-control" ng-model="schemaInputs[$index]" placeholder="{{s.placeholder}}"/>
                    <input ng-switch-when="password" type="password" id="{{s.fieldName}}" name="{{s.fieldName}}" class="form-control" ng-model="schemaInputs[$index]" placeholder="{{s.placeholder}}"/>
                    <input ng-switch-when="boolean" type="checkbox" id="{{s.fieldName}}" name="{{s.fieldName}}" class="form-control" ng-model="schemaInputs[$index]" placeholder="{{s.placeholder}}"/>
                </div>
            </div>

            <div class="form-group" ng-show="showUgdTemplatesDropdown">
                <label class="control-label col-sm-2">{{'label.input.ugdtemplate' | translate}}</label>
            <div class="col-sm-3">
                <select ng-model="ugdTemplate"
                        ng-options="ugdTemplate as ugdTemplate.name for ugdTemplate in ugdTemplates | filter:filterText"
                        value="{{ugdTemplate.name}}" class="form-control">
                    <option style="display:none" value="">{{'label.selectugdtemplate' | translate}}</option>
                </select>
            </div>
            </div>

            <hr/>
            <div class="form-group" ng-show="template">
            <label class="control-label col-sm-2" for="events">{{'label.input.events' | translate}}<span
                        class="required">*</span></label>
                <div class="col-sm-2">
                    <select ng-model="grouping"
                    ng-options="grouping as grouping.name for grouping in groupings"
                    value="{{grouping.name}}" ng-change="resetActions()" class="form-control">
                        <option style="display:none" value="">{{'label.selectgrouping' | translate}}</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <select ng-model="entity"
                    ng-options="entity as entity.name for entity in grouping.entities"
                    value="{{entity.name}}" class="form-control" ng-change="changeEntity(entity.name)">
                        <option style="display:none" value="">{{'label.selectentity' | translate}}</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <select ng-model="action"
                    ng-options="action as action for action in entity.actions"
                    value="{{action.name}}" class="form-control">
                        <option style="display:none" value="">{{'label.selectaction' | translate}}</option>
                    </select>

                </div>
                <a ng-click="addEvent()"><i class="icon-plus icon-white"></i></a>
            </div>

            <table class="table" width="100%" ng-show="events.length>0">
                <tr class="graybg">
                    <th>{{'label.heading.entityname' | translate}}</th>
                    <th>{{'label.heading.actionname' | translate}}</th>
                </tr>
                <tr ng-repeat="event in events">
                    <td>{{event.entityName}}</td>
                    <td>{{event.actionName}}</td>
                    <td><a ng-click="deleteEvent($index)"><i class="icon-remove icon-white"></i></a></td>
                </tr>
            </table>

            <div class="col-md-offset-3">
                <a id="cancel" href="#/hooks" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
                <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_HOOK'>{{'label.button.save' | translate}}</button>
            </div>
        </fieldset>
    </form>
</div>