<div *ngFor="let rule of filterRules" class="form-row form-group">
  <div class="col">
    <select class="form-control form-control-sm" [(ngModel)]="rule.type" (change)="rule.value = null">
      <option *ngFor="let ruleType of getRuleTypes()" [ngValue]="ruleType">{{ruleType.name}}</option>
    </select>
  </div>
  <div class="col">
    <input *ngIf="rule.type.datatype == 'string'" type="text" class="form-control form-control-sm" [(ngModel)]="rule.value">
    <input *ngIf="rule.type.datatype == 'number'" type="number" class="form-control form-control-sm" [(ngModel)]="rule.value">
    <input *ngIf="rule.type.datatype == 'date'" type="date" class="form-control form-control-sm" [(ngModel)]="rule.value">

    <select *ngIf="rule.type.datatype == 'tag'" class="form-control form-control-sm" [(ngModel)]="rule.value">
      <option *ngFor="let t of tags" [ngValue]="t.id">{{t.name}}</option>
    </select>

    <select *ngIf="rule.type.datatype == 'documentType'" class="form-control form-control-sm" [(ngModel)]="rule.value">
      <option *ngFor="let dt of documentTypes" [ngValue]="dt.id">{{dt.name}}</option>
    </select>

    <select *ngIf="rule.type.datatype == 'correspondent'" class="form-control form-control-sm" [(ngModel)]="rule.value">
      <option *ngFor="let c of correspondents" [ngValue]="c.id">{{c.name}}</option>
    </select>

    <select *ngIf="rule.type.datatype == 'boolean'" class="form-control form-control-sm" [(ngModel)]="rule.value">
      <option [ngValue]="true">Yes</option>
      <option [ngValue]="false">No</option>
    </select>

  </div>
  <div class="col-auto">
    <button class="btn btn-sm btn-outline-secondary" (click)="removeRuleClicked(rule)">
      <svg class="toolbaricon" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#x"/>
      </svg>
    </button>
  </div>
</div>

<div class="form-row form-group">
  <div class="col">
    <select [(ngModel)]="selectedRuleType" class="form-control form-control-sm">
      <option *ngFor="let ruleType of getRuleTypes()" [ngValue]="ruleType">{{ruleType.name}}</option>
    </select>
  </div>
  <div class="col-auto">
    <button (click)="newRuleClicked()" class="btn btn-sm btn-outline-secondary">Add</button>
  </div>
  <div class="col-auto">
    <button (click)="clearClicked()" class="btn btn-sm btn-outline-secondary">Clear</button>
  </div>
  <div class="col-auto">
    <button (click)="applyClicked()" class="btn btn-sm btn-outline-secondary">Apply</button>
  </div>
</div>
