<div
  class="list-group form-inline elasticrule"
  ng-class="{'mayBeHidden' : (!fieldsConfiguration[filter.guid].visible || filter.att == undefined) }"
>
  <span
    ng-if="allowFieldsConfiguration"
    title="L'édition de ce champ sera possible pour l'utilisateur final"
  >
    <input
      type="checkbox"
      ng-model="fieldsConfiguration[filter.guid].visible"
    />
  </span>

  <!--Label de l'attribut (editMode)-->
  <input
    ng-if="!controleReponseRule && !controleReponseRulev2 && !filter.group && isEditMode()"
    data-ng-model="filter.label"
    type="text"
    class="form-control attributeSelector"
  />
  <!--Label de l'attribut (renderMode)-->
  <span
    ng-if="!controleReponseRule && !controleReponseRulev2 && !filter.group && !isEditMode()"
    class="form-control attributeSelector labelDisabled"
    title="{{getLabel(filter)}}"
    >
    {{truncateLabel(getLabel(filter))}}
  </span>

  <select
    class="form-control attributeSelector"
    data-ng-model="filter.att"
    ng-if="!controleReponseRule && !controleReponseRulev2 && !filter.group && isEditMode()"
    ng-change="setLabel(); filter.operand=undefined"
    data-ng-options="att as displayTranslatedAlias(att) for att in filter.attributesaliases | orderBy:displayTranslatedAlias(att)"
  ></select>

  <!-- Controle JSON ANC BAC V1-->
  <!-- a supprimer le moment venu, remplace par la v2 -->
  <select
    class="form-control"
    data-ng-model="filter.att"
    ng-if="controleReponseRule && filter.attributesaliases"
    ng-disabled="disableAttributeSelection"
    data-ng-options="att.alias as att.prefixedAlias group by att.category for att in filter.attributesaliases"
  >
  </select>

  <!-- Controle JSON ANC BAC V2-->
  <ui-select
    class="attributsCtrlJson"
    ng-model="filter.att"
    theme="bootstrap"
    ng-if="controleReponseRulev2"
    ng-disabled="disableAttributeSelection"
    reset-search-input="false"
  >
    <ui-select-match placeholder="Choisir un attribut"
      ><span class="category">{{$select.selected.category}}</span>
      {{$select.selected.prefixedAlias}}</ui-select-match
    >
    <ui-select-choices
      group-by="'category'"
      repeat="att in filter.attributesaliases | filter: {prefixedAlias: $select.search} track by $index"
    >
      <div
        ng-bind-html="att.htmlPrefixedAlias | highlight: $select.search"
      ></div>
    </ui-select-choices>
  </ui-select>

  <!-- Controle Facturation -->
  <ui-select
    class="attributsCtrlJson"
    ng-model="filter.att"
    theme="bootstrap"
    ng-if="filter.group"
    ng-disabled="disableAttributeSelection"
    reset-search-input="false"
    style="width: auto;"
  >
    <ui-select-match placeholder="Choisir un attribut"
      ><span class="category">{{$select.selected.category}}</span>
      {{$select.selected.prefixedAlias}}</ui-select-match
    >
    <ui-select-choices
      group-by="'category'"
      repeat="att.alias as att in filter.selectedfti.attributes | filter: {prefixedAlias: $select.search} track by $index"
    >
      <div ng-bind-html="att.prefixedAlias | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

  <span ng-if="isEditMode()">
    <!-- String -->

    <select
      data-ng-model="filter.operand"
      ng-change="checkOperandAnc(filter)"
      ng-init="checkOperandAnc(filter); initOperator(filter,'startWith')"
      class="form-control ruleOperand"
      ng-disabled="filter.disabled"
      ng-if="filter.attr.type=='java.lang.String'"
    >
      <!-- Term Options -->
      <optgroup label="{{ 'elastic.search.rule.text' | translate }}">
        <option value="startWith"
          >{{ 'elastic.search.rule.startswith' | translate }}</option
        >
        <option value="endWith"
          >{{ 'elastic.search.rule.endswith' | translate }}</option
        >
        <option value="regexp"
          >{{ 'elastic.search.rule.contains' | translate }}</option
        >
        <option value="equals"
          >{{ 'elastic.search.rule.equals' | translate }}</option
        >
        <option value="notEquals"
          >{{ 'elastic.search.rule.notequals' | translate }}</option
        >

      </optgroup>

      <!-- Term Options -->
      <optgroup label="{{ 'elastic.search.rule.liste' | translate }}">
        <option value="include"
          >{{ 'elastic.search.rule.include' | translate }}</option
        >
      </optgroup>

      <!-- Generic Options -->
      <optgroup label="{{ 'elastic.search.rule.generic' | translate }}">
        <option value="exists"
          >{{ 'elastic.search.rule.exists' | translate }}</option
        >
        <option value="notExists"
          >{{ 'elastic.search.rule.notexists' | translate }}</option
        >
      </optgroup>

      <!-- Anc seulement, attribut dont l'alias est Ville -->

      <optgroup
        ng-if="applicationIsAnc && filter.attr.alias=='Ville'"
        label="Régie/DSP"
      >
        <option value="anc_ville_regie"> Régie </option>
        <option value="anc_ville_dsp"> DSP </option>
      </optgroup>
    </select>
    <!-- Number -->
    <select
      data-ng-model="filter.operand"
      class="form-control ruleOperand"
      ng-disabled="filter.disabled"
      ng-if="filter.attr.type=='java.lang.Number'
                  || filter.attr.type=='java.lang.Float'||filter.attr.type=='java.lang.BigDecimal'
                  || filter.attr.type=='java.lang.Double' || (filter.attr.type=='java.lang.Integer' && !filter.attr.interpretAsBoolean) 
                  || filter.attr.type=='java.lang.Long'"
      ng-init="initOperator(filter,'equals')"
    >
      <optgroup label="{{ 'elastic.search.rule.numeral' | translate }}">
        <option value="equals">=</option>
        <option value="gt">&gt;</option>
        <option value="gte">&ge;</option>
        <option value="lt">&lt;</option>
        <option value="lte">&le;</option>
      </optgroup>

      <optgroup label="{{ 'elastic.search.rule.generic' | translate }}">
        <option value="exists"
          >{{ 'elastic.search.rule.exists' | translate }}</option
        >
        <option value="notExists"
          >{{ 'elastic.search.rule.notexists' | translate }}</option
        >
      </optgroup>
    </select>

    <!--Date-->
    <select
      data-ng-model="filter.operand"
      class="form-control ruleOperand"
      ng-disabled="filter.disabled"
      ng-if="filter.attr.type=='java.sql.Timestamp' || filter.attr.type=='java.sql.Date' || filter.attr.type=='java.util.Date'"
      ng-init="initOperator(filter,'equals')"
    >
      <optgroup label="{{ 'elastic.search.rule.exact' | translate }}">
        <option value="equals">=</option>
      </optgroup>
      <optgroup label="{{ 'elastic.search.rule.range' | translate }}">
        <option value="lt">&lt;</option>
        <option value="lte">&le;</option>
        <option value="gt">&gt;</option>
        <option value="gte">&ge;</option>
      </optgroup>
      <optgroup label="{{ 'elastic.search.rule.rangebounded' | translate }}">
        <option value="last">{{ 'elastic.search.rule.last' | translate }}</option>
        <option value="next">{{ 'elastic.search.rule.next' | translate }}</option>
      </optgroup>
      <optgroup label="{{ 'elastic.search.rule.generic' | translate }}">
        <option value="exists"
          >{{ 'elastic.search.rule.exists' | translate }}</option
        >
        <option value="notExists"
          >{{ 'elastic.search.rule.notexists' | translate }}</option
        >
      </optgroup>
    </select>

    <!--Boolean-->
    <select
      data-ng-model="filter.operand"
      class="form-control ruleOperand"
      ng-disabled="filter.disabled"
      ng-if="filter.attr.type=='java.lang.Boolean' || (filter.attr.type=='java.lang.Integer' && filter.attr.interpretAsBoolean)"
      ng-init="initOperator(filter,'equals')"
    >
      <optgroup label="{{ 'elastic.search.rule.exact' | translate }}">
        <option value="equals">=</option>
      </optgroup>
      <optgroup label="{{ 'elastic.search.rule.generic' | translate }}">
        <option value="exists"
          >{{ 'elastic.search.rule.exists' | translate }}</option
        >
        <option value="notExists"
          >{{ 'elastic.search.rule.notexists' | translate }}</option
        >
      </optgroup>
    </select>
  </span>

  <!-- LES INPUTS-->

  <span class="filterValueAndButtons">
  <input
    data-ng-if="(inputFloatNeeded() && (filter.attr.type=='java.lang.Number' || filter.attr.type=='java.lang.Float'||filter.attr.type=='java.lang.BigDecimal' 
				 || filter.attr.type=='java.lang.Double' || filter.attr.type=='java.lang.Long' 
         || (filter.attr.type=='java.lang.Integer' && !filter.attr.interpretAsBoolean)) && !filter.showAllValues)
         && !(inputRestrictionNeeded() && ((filter.attr.restrictions[0].type === 'Domain')
         || (filter.attr.restrictions[0].type === 'Tables') || (filter.attr.restrictions[0].type === 'User')))"
    class="form-control ruleValue"
    data-ng-model="filter.value"
    ng-disabled="filter.disabled"
    list="{{globalsearchsuggetion}}"
    type="number"
  />

  <select
    class="form-control ruleValue"
    data-ng-model="filter.value"
    ng-disabled="filter.disabled"
    data-ng-options="item as item for item in autocompleteglobalsearch"
    ng-if=" (filter.attr.type=='java.lang.Number' || filter.attr.type=='java.lang.Float'||filter.attr.type=='java.lang.BigDecimal' 
					   || filter.attr.type=='java.lang.Double' || filter.attr.type=='java.lang.Long' || filter.attr.type=='java.lang.Integer' ) && filter.showAllValues && inputFloatNeeded()"
    data-animation="am-flip-x"
    style="max-width: 250px;"
  ></select>

  <input
    type="text"
    ng-if="(filter.attr.type == 'java.lang.String' && !filter.showAllValues && inputNeeded())
        && !(inputRestrictionNeeded() && ((filter.attr.restrictions[0].type === 'Domain')
        || (filter.attr.restrictions[0].type === 'Tables') || (filter.attr.restrictions[0].type === 'User')))"
    class="form-control ruleValue"
    ng-model="filter.value"
    bs-options="item as item for item in autocompleteglobalsearch"
    data-animation="am-flip-x"
    bs-typeahead
    autocomplete="off"
    style="max-width: 250px;"
    ng-disabled="filter.disabled"
  />

  <select
    class="form-control ruleValue"
    data-ng-model="filter.value"
    data-ng-options="item as translateValueItem(item) for item in autocompleteglobalsearch"
    ng-if=" filter.attr.type == 'java.lang.String'  && filter.showAllValues && inputNeeded() && filter.operand !== 'include'"
    data-animation="am-flip-x"
    style="max-width: 250px;"
    ng-disabled="filter.disabled"
  ></select>

  <div
    class="form-control ruleValue"
    style="
      min-height: 90px;
      max-height: 120px;
      width: 150px;
      moverflow: auto;
      padding-left: 0px;
      overflow: auto;
    "
    ng-if=" filter.attr.type == 'java.lang.String'  && filter.showAllValues && inputNeeded() && filter.operand === 'include'"
  >
    <ul style="padding: 0 0 0 10px;">
      <li
        class="checkbox col-md-12"
        ng-repeat="item in autocompleteglobalsearchinclude | orderBy : 'name'"
        style="
          display: inline-block;
          min-height: 20px;
          max-height: 40px;
          max-width: 140px;
          padding: 0px;
        "
      >
        <input
          type="checkbox"
          ng-model="item.selected"
          ng-change="clickedCheckbox(item)"
          ng-disabled="filter.disabled"
        />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
  <div
    javautildate
    gcatt="filter.attr"
    result="filter.newValueUtil"
    initvalue="filter.value"
    class="form-control"
    ng-disabled="filter.disabled"
    data-ng-if="inputNeeded() && (filter.attr.type =='java.sql.Timestamp' 
					   || filter.attr.type=='java.sql.Date' || filter.attr.type=='java.util.Date') && !filter.showAllValues"
  ></div>

  <select
    class="form-control ruleValue"
    data-ng-model="filter.value"
    ng-disabled="filter.disabled"
    data-ng-options="item as item for item in autocompleteglobalsearch "
    ng-if=" inputNeeded() && (filter.attr.type =='java.sql.Timestamp' 
					   || filter.attr.type=='java.sql.Date' || filter.attr.type=='java.util.Date') && filter.showAllValues"
    data-animation="am-flip-x"
    style="max-width: 200px;"
  ></select>

  <span 
    class="ruleValue"
    data-ng-if="inputdayNeeded() && (filter.attr.type =='java.sql.Timestamp' || filter.attr.type=='java.sql.Date' || filter.attr.type=='java.util.Date')"
    style="display: inline-block;"
    >
    <input
      class="form-control"
      data-ng-model="filter.newvalue"
      ng-disabled="filter.disabled"
      type="day"
    />
    <translate>elastic.search.day</translate>
  </span>

  <!--select data-ng-model="filter.operand" data-ng-if="inputBooleanNeeded() && filter.attr.type =='java.lang.Boolean'"class="form-control">
				 <option value="true">true</option>
				 <option value="false">false</option>
			 </select-->

  <div
    javalangboolean
    gcatt="filter.attr"
    result="filter.newValueUtil"
    ng-disabled="filter.disabled"
    class="form-control ruleValue"
    data-ng-if="inputBooleanNeeded() && (filter.attr.type =='java.lang.Boolean' || (filter.attr.type=='java.lang.Integer' && filter.attr.interpretAsBoolean))"
  ></div>

  <div
    style="display: inline-block; 
      vertical-align: middle;"
    data-ng-if="inputRestrictionNeeded() && filter.attr.restrictions[0].type">
    <!-- form_fields needs "vertical-align" because there are not aligned verticaly -->
    <div
      form-field
      style="display:inline-block;"
      ng-disabled="filter.disabled"
      attribute="filter.attr" 
      attname="filter.attr.name"
      fti="filter.selectedfti"
      ftid="ftid"
      field-data="{restrictionKeyAsInt: filter.attr.type === 'java.lang.Integer'}"
      res="filter.restrictedValue"
      elastic-filter-values="condition.filters"
    ></div>
  </div>

  <div class="btn-group" ng-show="!filter.disabled">
    <button
      type="button"
      ng-if="isEditMode()"
      class="btn btn-danger remover actual_remover"
      data-ng-click="onRemove()"
      title="{{ 'elastic.search.removerule' | translate }}"
    >
      <i class="fa fa-minus"></i>
    </button>
    <button
      type="button"
      ng-if="!isInputHidden()"
      class="btn btn-default elasticValueCleaner"
      data-ng-click="cleanFieldValue(filter)"
    >
      <translate>elastic.search.rule.clear</translate>
    </button>
    <button
      type="button"
      class="btn btn-default remover"
      ng-if="filter.att && filter.operand === 'include' && filter.attr.type=='java.lang.String'"
      title="{{ 'elastic.search.info' | translate }}"
      ng-click="howToUser()"
    >
      <i class="fa fa-info-circle"></i>
    </button>
  </div>
  </span>
</div>
