
<ion-content>
  <div class="date-container">
    <ion-row class="ion-justify-content-center">
      <ion-col [size]="11">
        <ion-item>
          <div class="date-time-icon date-primary"></div>
          <ion-label>Date From</ion-label>
          <ion-datetime
            [placeholder]="Select"
            display-format="DD/MM/YYYY"
            [min]="1900"
            [max]="2100"
            [(ngModel)]="dateFrom"
            doneText="Done"
            cancelText="Cancel"
          ></ion-datetime>
        </ion-item>
      </ion-col>
      <ion-col [size]="11">
        <ion-item>
          <div class="date-time-icon date-primary"></div>
          <ion-label>Date To</ion-label>
          <ion-datetime
            [placeholder]="Select"
            display-format="DD/MM/YYYY"
            [min]="1900"
            [max]="2100"
            [(ngModel)]="dateTo"
            doneText="Done"
            cancelText="Cancel"
          ></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
  </div>

  <div class="filters-container">
      <span 
        *ngFor="let filter of filtersArray; let i = index"
        [ngClass]="{'selected': filter.active == true,'notSelected': filter.active == false }"
        class="filter-tag-button"
        (click)="changeFiltersSelection(i)"> 
          {{filter.name}}
      </span>
  </div>

  <ion-list>
    <ion-radio-group [(ngModel)]="selectedShiftType">
      <ion-list-header>
        Shift type
      </ion-list-header>
      <ion-item *ngFor="let shift of shiftTypesArray">
        <ion-label>{{shift.SHT_TYPE_DESC}}</ion-label>
        <ion-radio value="{{shift.SHT_TYPE}}"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>

  <ion-button (click)="dismissModal()">Search</ion-button>
</ion-content>
