<div class="editTrigger tagManagerManageEdit"
     piwik-content-block
     feature="Tag Manager"
     content-title="{{ editTrigger.editTitle }}">

    <p ng-show="editTrigger.model.isLoading">
        <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
    </p>

    <p ng-show="editTrigger.model.isUpdating">
        <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'TagManager_UpdatingData'|translate }}</span>
    </p>

    <form ng-show="!editTrigger.chooseTriggerType && editTrigger.editTitle" ng-submit="editTrigger.edit ? editTrigger.updateTrigger() : editTrigger.createTrigger()">
        <div>

            <div class="alert alert-warning"
                 ng-show="editTrigger.trigger.typeMetadata.isDisabled">
                {{ 'TagManager_UseCustomTemplateCapabilityRequired'|translate:('TagManager_CapabilityUseCustomTemplates'|translate) }}
            </div>

            <div piwik-field uicontrol="text" name="type"
                 ng-model="editTrigger.trigger.typeMetadata.name"
                 data-disabled="true"
                 inline-help="{{ editTrigger.trigger.typeMetadata.description }} {{ editTrigger.trigger.typeMetadata.help }}"
                 title="{{ 'TagManager_Type'|translate }}">
            </div>

            <div piwik-field uicontrol="text" name="name"
                 ng-model="editTrigger.trigger.name"
                 maxlength="50"
                 ng-change="editTrigger.setValueHasChanged()"
                 title="{{ 'General_Name'|translate }}"
                 inline-help="{{ 'TagManager_TriggerNameHelp'|translate }}">
            </div>

            <div class="form-group row" ng-show="editTrigger.trigger.typeMetadata.parameters|length">
                <div class="col s12"><h3>{{ 'TagManager_ConfigureThisTrigger'|translate }}</h3></div>
            </div>

            <div ng-repeat="parameter in editTrigger.trigger.typeMetadata.parameters">
                <div piwik-form-field="parameter" all-settings="editTrigger.trigger.typeMetadata.parameters"></div>
            </div>

            <div class="form-group row" ng-show="editTrigger.trigger.typeMetadata.hasAdvancedSettings">
                <div class="col s12"><h3>{{ 'TagManager_OnlyTriggerWhen'|translate }} {{ 'Goals_Optional'|translate }}</h3>
                </div>
            </div>
            <div ng-show="editTrigger.trigger.typeMetadata.hasAdvancedSettings">

                <div class="form-group row multiple">
                    <div class="col s12 m12">
                        <div>
                            <p>
                                {{ 'TagManager_TriggerConditionsHelp'|translate }}</p>

                            <div ng-repeat="(index, condition) in editTrigger.trigger.conditions"
                                 class="condition condition{{ index }} multiple valign-wrapper">

                                <div piwik-field uicontrol="expandable-select" name="condition_actual"
                                     class="innerFormField"
                                     full-width="true"
                                     title="{{ editTrigger.variableIdToName[condition.actual] || condition.actual }}"
                                     ng-model="editTrigger.trigger.conditions[index].actual"
                                     options="editTrigger.availableVariables"
                                     ng-change="editTrigger.setValueHasChanged()">
                                </div>

                                <div piwik-field uicontrol="select" name="condition_comparison"
                                     class="innerFormField comparisonField"
                                     full-width="true"
                                     ng-model="editTrigger.trigger.conditions[index].comparison"
                                     ng-change="editTrigger.setValueHasChanged()"
                                     options="editTrigger.availableComparisons">
                                </div>

                                <div piwik-field uicontrol="text" name="condition_expected"
                                     class="innerFormField"
                                     full-width="true"
                                     ng-model="editTrigger.trigger.conditions[index].expected"
                                     ng-change="editTrigger.setValueHasChanged();editTrigger.onConditionChange()">
                                </div>

                                <span ng-click="editTrigger.removeConditionEntry(index)"
                                      title="{{ 'General_Remove'|translate }}"
                                      ng-hide="(index + 1) == (editTrigger.trigger.conditions|length)"
                                      class="icon-minus valign"></span>
                            </div>
                        </div>
                        <p class="triggerConditionNode">{{ 'TagManager_TriggerConditionNode'|translate }}</p>
                    </div>
                </div>
            </div>

            <div class="alert alert-warning"
                 ng-show="editTrigger.trigger.typeMetadata.isDisabled">
                {{ 'TagManager_UseCustomTemplateCapabilityRequired'|translate:('TagManager_CapabilityUseCustomTemplates'|translate) }}
            </div>

            <div piwik-save-button
                 class="createButton"
                 ng-show="!editTrigger.trigger.typeMetadata.isDisabled"
                 onconfirm="editTrigger.edit ? editTrigger.updateTrigger() : editTrigger.createTrigger()"
                 data-disabled="editTrigger.model.isUpdating || !editTrigger.isDirty"
                 value="{{ editTrigger.edit ? ('CoreUpdater_UpdateTitle'|translate) : ('TagManager_CreateNewTrigger'|translate) }}"
                 saving="editTrigger.model.isUpdating">
            </div>

            <div class='entityCancel' ng-show="!editTrigger.isEmbedded">
                <a ng-click="editTrigger.cancel()">{{ 'General_Cancel'|translate }}</a>
            </div>
        </div>
    </form>

    <div ng-show="editTrigger.chooseTriggerType" id="confirmSelectTriggerType">
        <ul class="collection with-header" ng-repeat="triggerCategory in editTrigger.availableTriggers">
            <li class="collection-header"><h4>{{ triggerCategory.name }}</h4></li>
            <li class="collection-item avatar templateType{{triggerTemplate.id}}"
                ng-repeat="triggerTemplate in triggerCategory.types"
                ng-class="{'disabledTemplate': triggerTemplate.isDisabled}"
                ng-click="editTrigger.createTriggerType(triggerTemplate)"
                title="{{ !triggerTemplate.isDisabled ? '' : ('TagManager_UseCustomTemplateCapabilityRequired'|translate:('TagManager_CapabilityUseCustomTemplates'|translate)) }}">
                <img ng-if="triggerTemplate.icon" ng-src="{{ triggerTemplate.icon }}" alt="" class="circle">
                <span class="title">{{ triggerTemplate.name }}</span>
                <p ng-show="triggerTemplate.description">{{ triggerTemplate.description }}</p>
                <span class="secondary-content" ng-show="!!triggerTemplate.help"><i class="icon-help" title="{{triggerTemplate.help}}"></i></span>
            </li>
        </ul>

        <div class='entityCancel' ng-show="!editTrigger.isEmbedded">
            <a ng-click="editTrigger.cancel()">{{ 'General_Cancel'|translate }}</a>
        </div>
    </div>
</div>