<div class="defaultFilters_clause">
  <form ng-submit="saveClause();closeThisDialog()">
    <div class="component-container">
      <div>
        <label>
          <translate>model.clauses.composant</translate>
        </label>
        <div class="autocomplete" disabled="lockedClauseFti" elementtype="'composant'" gcautocompletedeprecated
             list="ftis"
             res="edit_clause.selectedFti"></div>
      </div>
      <div class="component-attribute">
        <label>
          <translate>model.clauses.attribute</translate>
        </label>
        <select
            class="form-control"
            ng-change="onAttributeChange()"
            ng-disabled="!edit_clause.selectedFti.fti.attributes"
            ng-model="edit_clause.selectedAttribute"
            ng-options="a.name for a in edit_clause.selectedFti.fti.attributes | orderBy:'name'"
        >
        </select>
      </div>
    </div>
    <div class="operands">
      <div>
        <label>
          <translate>model.clauses.operator</translate>
        </label>
        <select
            class="form-control"
            ng-init="edit_clause.operator = edit_clause.operator ? edit_clause.operator : edit_clause.operators[0]"
            ng-model="edit_clause.operator"
            ng-options="a for a in edit_clause.operators">
        </select>
      </div>
      <div>
        <input ng-model="edit_clause.not" type="checkbox"/>
        <label>NOT</label>
      </div>
      <div>
        <input checked id="and" name="operand" ng-model="edit_clause.operand" type="radio"
               value="AND">
        <label for="and">AND</label>
      </div>
      <div>
        <input id="or" name="operand" ng-model="edit_clause.operand" type="radio" value="OR">
        <label for="or">OR</label>
      </div>
    </div>
    <div class="attribute-value">
      <div
          ng-style="{'display': currentAttributeIsDate ? 'flex':'block'}"
      >
        <button class="btn btn-default" ng-click="getAttributeValues()"
                title="{{'query.inject_values' | translate}}" type="button">
          <span class="fa fa-refresh"></span>
        </button>
        <input
            bs-datepicker
            class="form-control date-input"
            data-autoclose="true"
            data-date-format="yyyy-MM-dd"
            data-timezone="UTC"
            model-date-format="yyyy-MM-ddTHH:mm:ss.sssZ"
            ng-if="currentAttributeIsDate && (!attvalues || attvalues.length === 0)"
            ng-hide="waitAttributeValues"
            ng-model="edit_clause.editvalue"
            placeholder="Calendrier"
            type="text"
        />
        <button
            bs-options="icon.label for icon in attvalues "
            bs-select class="btn btn-default value-button"
            ng-hide="waitAttributeValues"
            ng-if="!currentAttributeIsDate || (attvalues && attvalues.length > 0)"
            ng-model="edit_clause.selectedattvalue"
            placeholder="{{'query.placeholder_values' | translate}}"
            type="button">
          Action <span class=""></span>
        </button>
      </div>
      <div ng-show="edit_clause.selectedAttribute && waitAttributeValues">
        <img
            src="img/common/wait.gif"
        />
      </div>
      <a
          class="btn btn-xs btn-success remover role-add-button"
          ng-click="updateClause()"
          ng-disabled="!canAddClause()"
      >
        <i class="fa fa-plus"></i>
      </a>
    </div>
    <div>
      <textarea
          class="form-control"
          ng-model="config.whereClause"
          ng-style="{'height': (criteriaHeight && criteriaHeight > 0) ? criteriaHeight + 'px' : 'auto'}">
      </textarea>
    </div>
    <div class="button-container">
      <div class="row">
        <div class="col-xs-12">
          <button
              class="btn btn-primary pull-right"
              ng-disabled="!validNewClause()"
              type="submit"
          >
            <translate>default_filters.save_filter</translate>
          </button>
          <button
              class="btn btn-default pull-right"
              ng-click="cancelClause()"
              type="button"
          >
            <translate>common.cancel</translate>
          </button>
        </div>
      </div>
    </div>
  </form>
</div>
