<div class="form-group">
  <label class="col-sm-1 control-label"
    >{{ 'transactionnumber' | translate }}:</label
  >
  <div class="col-sm-1">
    <input
      id="id"
      class="form-control"
      type="text"
      ng-model="vm.filterForm.F_TRANSACTION_ID"
      ng-disabled="!vm.isSortingSearchingEnabled"
    />
  </div>

  <label class="col-sm-1 control-label"
    >{{ 'transaction_description' | translate }}:</label
  >
  <div class="col-sm-2">
    <input
      id="text"
      class="form-control"
      type="text"
      ng-model="vm.filterForm.F_TRANSACTION_DESCRIPTION"
      ng-disabled="!vm.isSortingSearchingEnabled"
    />
  </div>

  <label class="col-sm-1 control-label"
    >{{ 'internal_ref_number' | translate }}:</label
  >
  <div class="col-sm-2">
    <input
      id="text"
      class="form-control"
      type="text"
      ng-model="vm.filterForm.F_ORDER_NR"
      ng-disabled="!vm.isSortingSearchingEnabled"
    />
  </div>

  <label class="col-sm-1 control-label">{{ 'account' | translate }}:</label>
  <div class="col-sm-3">
    <select2
      multiple
      ng-model="vm.filterForm.F_ACCOUNT_NR"
      s2-options="val as val for val in vm.trx_accounts"
      ng-disabled="!vm.isSortingSearchingEnabled"
    ></select2>
  </div>
</div>

<div class="form-group">
  <label class="col-sm-1 control-label"
    >{{ 'CATEGORY_GROUP' | translate }}:</label
  >
  <div class="col-sm-5">
    <select2
      multiple
      ng-model="vm.filterForm.F_TRANS_MODE_COMMENT"
      s2-options="val as val for val in vm.trx_trans_mode_comments"
      ng-disabled="!vm.isSortingSearchingEnabled"
    ></select2>
  </div>

  <label class="col-sm-1 control-label"
    >{{ 'MIN_TRANS_AMOUNT' | translate }}:</label
  >
  <div class="col-sm-2">
    <input
      id="text"
      class="form-control"
      type="text"
      ng-model="vm.filterForm.F_TRANS_AMOUNT"
      ng-disabled="!vm.isSortingSearchingEnabled"
    />
  </div>
</div>

<div class="form-group">
  <label for="text" class="col-sm-1 control-label"
    >{{ 'COUNTERPARTY_IBAN' | translate }}:</label
  >

  <div class="col-sm-2">
    <select2
      multiple
      ng-model="vm.filterForm.COUNTERPARTY_IBAN"
      ng-disabled="!vm.isCounterpartyIBANFilterEnabled"
      s2-options="val as val for val in vm.counterparty_ibans"
    ></select2>
  </div>

  <button
          type="button"
          class="btn btn-default ng-binding ng-scope"
          ng-show="!vm.isCounterpartyIBANFilterEnabled"
          ng-click="vm.activateCounterpartyIBANFilter()"
        >
          {{ 'ACTIVATE' | translate }}
        </button>
  <button
        type="button"
        class="btn btn-default ng-binding ng-scope"
        ng-show="vm.isCounterpartyIBANFilterEnabled"
        ng-click="vm.deactivateCounterpartyIBANFilter()"
      >
        {{ 'DEACTIVATE' | translate }}
      </button>
</div>

<div class="form-group">
  <label class="col-sm-1 control-label">{{ "RANGE" | translate }}:</label>
  <div class="col-sm-3">
    <select
      class="form-control"
      id="range"
      ng-model="vm.filterForm.range"
      ng-options="val.ts as val.label for val in vm.trx_ranges"
      ng-change="vm.changeTransPeriod()"
    ></select>
  </div>

  <label class="col-sm-1 control-label" ng-if="!vm.filterForm.range"
    >{{ "DATES" | translate }}:</label
  >
  <div class="col-sm-6" ng-if="!vm.filterForm.range">
    <dates-from-to data="vm.filterForm.manual_dates"></dates-from-to>
  </div>
</div>
