<div class="sldfilter">
  <div class="row">
    <div class="col-xs-12">
      <div
        class="btn btn-danger btn-xxs pull-right"
        ng-click="removeFilter()"
        ng-attr-title="{{'model.styles.editor.filter.deleteCriteria' | translate}}"
      >
        <i class="fa fa-remove"></i>
      </div>
      <label for="currentFilter-type">
        <translate>model.styles.editor.filter.type</translate>
      </label>
      <select
        ng-model="currentFilter.type"
        class="form-control"
        ng-change="onFilterTypeChange()"
        id="currentFilter-type"
        ng-attr-title="{{'model.styles.editor.filter.selectType' | translate}}"
      >
        <optgroup
          ng-repeat="operatorGroup in listOfComparisonOperators"
          label="{{operatorGroup.name | translate}}"
        >
          <option
            ng-repeat="operator in operatorGroup.list"
            ng-selected="operator.key==currentFilter.type"
            value="{{operator.key}}"
            >{{operator.label | translate}}</option
          >
        </optgroup>
      </select>
    </div>
  </div>

  <div>
    <div>
      <div class="row">
        <div class="col-xs-12">
          <label
            ><translate>model.styles.editor.filter.property</translate></label
          >
          <gcautocomplete
            ng-model="currentFilter.data.PropertyName"
            list="fti.attributes"
            attribute-displayed="'alias'"
            attribute-used="'name'"
            on-change="onAttributeChange()"
            data-placeholder="'model.styles.editor.category.pick_attribute' | translate"
          >
          </gcautocomplete>
        </div>
      </div>

      <div class="row" ng-show="criteriaTemplate.comparison.showLikeHelp">
        <div class="col-xs-12">
          <div class="alert alert-info">
            <h5>
              {{'model.styles.editor.filter.types.comparison.list.PropertyIsLike' | translate}}
            </h5>
            <ul>
              <li>
                <b>%</b>
                {{'model.styles.editor.filter.types.PropertyIsLikeHelp.wildCard' | translate}}
              </li>
              <li>
                <b>?</b>
                {{'model.styles.editor.filter.types.PropertyIsLikeHelp.singleChar' | translate}}
              </li>
              <li>
                <b>!</b>
                {{'model.styles.editor.filter.types.PropertyIsLikeHelp.escapeChar' | translate}}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="row" ng-show="criteriaTemplate.comparison.showValue">
        <div class="col-xs-12">
          <label
            ><translate>model.styles.editor.filter.literal</translate></label
          >
          <div
            class="show-value"
            ng-class="{'button-side': currentFilter.noValues && !isSearchingValues}"
          >
            <input
              class="form-control"
              ng-if="currentFilter.noValues || attributeValueEditMode['uniqueValue'].open"
              ng-model="currentFilter.data.Literal"
              ng-disabled="!attributeValueEditMode['uniqueValue'].open"
              ng-change="attributeValueEditMode['uniqueValue'].change = true"
            >
            <gcautocomplete
              ng-if="!currentFilter.noValues && !attributeValueEditMode['uniqueValue'].open"
              ng-model="currentFilter.data.Literal"
              list="attributeValues"
              attribute-displayed="'label'"
              attribute-used="'value'"
              ng-disabled="currentFilter.noValues"
              data-placeholder="('model.styles.editor.filter.' + (currentFilter.noValues ? 'searchValues' : 'selectValue')) | translate"
            >
            </gcautocomplete>
            <div ng-if="currentFilter.noValues">
              <button
                ng-if="!isSearchingValues"
                class="btn btn-info"
                type="button"
                ng-click="searchAttributeValues()"
                ng-attr-title="{{('model.styles.editor.filter.openValuesTable' | translate) + currentFilter.data.PropertyName}}"
                ng-disabled="attributeValueEditMode['uniqueValue'].open"
              >
                <i class="fa fa-search"></i>
              </button>
              <i
                ng-if="isSearchingValues"
                class="fa fa-spinner fa-spin"
              ></i>
            </div>
            <div class="edition">
              <button
                ng-if="!attributeValueEditMode['uniqueValue'] || !attributeValueEditMode['uniqueValue'].open"
                class="btn btn-default"
                type="button"
                ng-click="toggleAttributeValueEditMode('uniqueValue')"
                ng-attr-title="{{('model.styles.editor.filter.addCustomAttrValue' | translate) + currentFilter.data.PropertyName}}"
              >
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
              </button>
              <button
                ng-if="attributeValueEditMode['uniqueValue'].open"
                class="btn btn-success"
                type="button"
                ng-click="addCustomAttributeValue()"
                ng-attr-title="{{('model.styles.editor.filter.saveCustomAttrValue' | translate) + currentFilter.data.PropertyName}}"
              >
                <i class="fa fa-check"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="comparison-between" ng-show="criteriaTemplate.comparison.between">
        <!--<pre>{{currentFilter | json}}</pre>-->
        <div class="lowerBoundary">
        <!--<div ng-class="currentFilter.noValues ? 'col-xs-5' : 'col-xs-6'">-->
          <label>
            {{('model.styles.editor.filter.literal' | translate) + ' ' + 1}}
          </label>
          <div>
            <input
              class="form-control"
              ng-if="currentFilter.noValues || attributeValueEditMode['low'].open"
              ng-model="currentFilter.data.LowerBoundary.Literal"
              ng-disabled="!attributeValueEditMode['low'].open"
              ng-change="attributeValueEditMode['low'].change = true"
            >
            <gcautocomplete
              ng-if="!currentFilter.noValues && !attributeValueEditMode['low'].open"
              ng-model="currentFilter.data.LowerBoundary.Literal"
              list="attributeValues"
              ng-disabled="currentFilter.noValues"
              attribute-displayed="'label'"
              attribute-used="'value'"
              data-placeholder="('model.styles.editor.filter.' + (currentFilter.noValues ? 'searchValues' : 'selectValue')) | translate"
            >
            </gcautocomplete>
            <button
              ng-if="!attributeValueEditMode['low'].open"
              class="btn btn-default"
              type="button"
              ng-click="toggleAttributeValueEditMode('low')"
              ng-attr-title="{{('model.styles.editor.filter.addCustomAttrValue' | translate) + currentFilter.data.PropertyName}}"
            >
              <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
            </button>
            <button
              ng-if="attributeValueEditMode['low'].open"
              class="btn btn-success"
              type="button"
              ng-click="addCustomAttributeValue('low')"
              ng-attr-title="{{('model.styles.editor.filter.saveCustomAttrValue' | translate) + currentFilter.data.PropertyName}}"
            >
              <i class="fa fa-check"></i>
            </button>
          </div>
        </div>
        <div
          ng-if="currentFilter.noValues"
          class="search-values-button"
        >
          <button
            ng-if="!isSearchingValues"
            class="btn btn-info"
            type="button"
            ng-click="searchAttributeValues()"
            ng-attr-title="{{('model.styles.editor.filter.openValuesTable' | translate) + currentFilter.data.PropertyName}}"
            ng-disabled="attributeValueEditMode['low'].open"
          >
            <i class="fa fa-search"></i>
          </button>
          <i
            ng-if="isSearchingValues"
            class="fa fa-spinner fa-spin"
          ></i>
        </div>
        <div class="upperBoundary">
        <!--<div ng-class="currentFilter.noValues ? 'col-xs-5' : 'col-xs-6'">-->
          <label>
            {{('model.styles.editor.filter.literal' | translate) + ' ' + 2}}
          </label>
          <div>
            <input
              class="form-control"
              ng-if="currentFilter.noValues || attributeValueEditMode['up'].open"
              ng-model="currentFilter.data.UpperBoundary.Literal"
              ng-disabled="!attributeValueEditMode['up'].open"
              ng-change="attributeValueEditMode['up'].change = true"
            >
            <gcautocomplete
              ng-if="!currentFilter.noValues && !attributeValueEditMode['up'].open"
              ng-model="currentFilter.data.UpperBoundary.Literal"
              list="attributeValues"
              ng-disabled="currentFilter.noValues"
              attribute-displayed="'label'"
              attribute-used="'value'"
              data-placeholder="('model.styles.editor.filter.' + (currentFilter.noValues ? 'searchValues' : 'selectValue')) | translate"
            >
            </gcautocomplete>
            <button
              ng-if="!attributeValueEditMode['up'].open"
              class="btn btn-default"
              type="button"
              ng-click="toggleAttributeValueEditMode('up')"
              ng-attr-title="{{('model.styles.editor.filter.addCustomAttrValue' | translate) + currentFilter.data.PropertyName}}"
            >
              <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
            </button>
            <button
              ng-if="attributeValueEditMode['up'].open"
              class="btn btn-success"
              type="button"
              ng-click="addCustomAttributeValue('up')"
              ng-attr-title="{{('model.styles.editor.filter.saveCustomAttrValue' | translate) + currentFilter.data.PropertyName}}"
            >
              <i class="fa fa-check"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
