<div class="filterEditor kuiModal">
  <div class="kuiModalHeader">
    <div class="kuiModalHeader__title">
      <span
        ng-show="filterEditor.filter.meta.isNew"
        i18n-id="common.ui.filterEditor.addFilterLabel"
        i18n-default-message="Add filter"
      ></span>
      <span ng-hide="filterEditor.filter.meta.isNew"
        i18n-id="common.ui.filterEditor.editFilterLabel"
        i18n-default-message="Edit filter"
      ></span>
    </div>

    <button
      data-test-subj="filterEditorModalCloseButton"
      class="kuiModalHeaderCloseButton kuiIcon fa-times"
      ng-click="filterEditor.onCancel()"
      aria-label="{{ ::'common.ui.filterEditor.closeFilterPopoverAriaLabel' | i18n: { defaultMessage: 'Close filter popover' } }}"
    ></button>
  </div>

  <div class="kuiModalBody">
    <!-- Filter definition -->
    <div class="kuiVerticalRhythm">
      <div class="kuiVerticalRhythmSmall filterEditor__labelBar">
        <label
          class="kuiLabel"
          i18n-id="common.ui.filterEditor.filterLabel"
          i18n-default-message="Filter"
        ></label>

        <div>
          <a
            class="kuiLink"
            ng-click="filterEditor.toggleEditingQueryDsl()"
            kbn-accessible-click
          >
            <span
              ng-if="filterEditor.isEditingQueryDsl"
              i18n-id="common.ui.filterEditor.searchFilterValuesLabel"
              i18n-default-message="Search filter values"
            ></span>

            <span
              ng-if="!filterEditor.isEditingQueryDsl"
              i18n-id="common.ui.filterEditor.editQueryDSLLabel"
              i18n-default-message="Edit Query DSL"
            ></span>
          </a>
        </div>
      </div>

      <!-- Filter dropdowns -->
      <div
        class="kuiFieldGroup kuiVerticalRhythmSmall kuiFieldGroup--alignTop"
        ng-show="!filterEditor.isQueryDslEditorVisible()"
      >
        <div class="kuiFieldGroupSection filterEditor__wideField">
          <filter-field-select
            data-test-subj="filterfieldSuggestionList"
            index-patterns="filterEditor.indexPatterns"
            field="filterEditor.field"
            on-select="filterEditor.onFieldSelect(field)"
          ></filter-field-select>
        </div>

        <div class="kuiFieldGroupSection">
          <filter-operator-select
            data-test-subj="filterOperatorList"
            ng-if="filterEditor.field"
            field="filterEditor.field"
            operator="filterEditor.operator"
            on-select="filterEditor.onOperatorSelect(operator)"
          ></filter-operator-select>
        </div>

        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide filterEditor__wideField filterEditorParamsInput">
          <filter-params-editor
            data-test-subj="filterParams"
            ng-if="filterEditor.field && filterEditor.operator"
            field="filterEditor.field"
            operator="filterEditor.operator"
            params="filterEditor.params"
          ></filter-params-editor>
        </div>
      </div>

      <!-- DSL editor -->
      <div
        class="kuiVerticalRhythmSmall"
        ng-show="filterEditor.isQueryDslEditorVisible()"
      >
        <filter-query-dsl-editor
          class="kuiVerticalRhythmSmall"
          filter="filterEditor.filter"
          on-change="filterEditor.setQueryDsl(queryDsl)"
          is-visible="filterEditor.isQueryDslEditorVisible()"
        ></filter-query-dsl-editor>

        <p class="kuiText kuiVerticalRhythmSmall">
          <span
            i18n-id="common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription"
            i18n-default-message="Filters are built using the "
            description="Part of composite text: common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription + common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription.esQueryDSLLinkText"
          ></span>
          <a
            class="kuiLink"
            target="_blank"
            rel="noopener"
            documentation-href="query.queryDsl"
            i18n-id="common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription.esQueryDSLLinkText"
            i18n-default-message="Elasticsearch Query DSL"
            description="Part of composite text: common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription + common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription.esQueryDSLLinkText"
          ></a>.
        </p>
      </div>
    </div>

    <!-- Label -->
    <div class="kuiVerticalRhythm">
      <div class="kuiVerticalRhythmSmall">
        <label
          class="kuiLabel"
          for="filterEditorLabelInput"
          i18n-id="common.ui.filterEditor.labelLabel"
          i18n-default-message="Label"
        ></label>
      </div>

      <input
        class="kuiTextInput kuiVerticalRhythmSmall"
        placeholder="{{ ::'common.ui.filterEditor.optionalPlaceholder' | i18n: { defaultMessage: 'Optional' } }}"
        type="text"
        ng-model="filterEditor.alias"
        id="filterEditorLabelInput"
      />
    </div>
  </div>

  <!-- Footer -->
  <div class="kuiModalFooter kuiBar">
    <div class="kuiBarSection" ng-hide="filterEditor.filter.meta.isNew">
      <button
        class="kuiButton kuiButton--danger"
        ng-click="filterEditor.onDelete()"
        aria-label="{{ ::'common.ui.filterEditor.deleteFilterAriaLabel' | i18n: { defaultMessage: 'Delete filter' } }}"
      >
        <span
          class="kuiIcon fa-trash"
          aria-hidden="true"
        ></span>
      </button>
    </div>

    <div class="kuiBarSection">
      <button
        class="kuiButton kuiButton--basic"
        ng-click="filterEditor.onCancel()"
        i18n-id="common.ui.filterEditor.cancelButtonLabel"
        i18n-default-message="Cancel"
      ></button>
      <button
        class="kuiButton kuiButton--primary"
        ng-disabled="!filterEditor.isValid()"
        ng-click="filterEditor.save()"
        data-test-subj="saveFilter"
        i18n-id="common.ui.filterEditor.saveButtonLabel"
        i18n-default-message="Save"
      ></button>
    </div>
  </div>
</div>
