<ion-header>
  <ion-toolbar>
    <ion-title>{{ 'general,search' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content no-padding>
  <!-- modal view page-->
  <ion-item dir="ltr" >
    <ion-searchbar class="no-padding " [(ngModel)]="searchField" (ionBlur)="searchFieldChanged()"
      (ionChange)="searchFieldChanged()" animated [showCancelButton]="false"
      [placeholder]=" 'general,search' | translate" [cancelButtonText]=" 'general,cancel' | translate"></ion-searchbar>
  </ion-item>

  <ion-list class="scrollable">
    <!-- absoulte scrollable area-->
    <ng-container *ngIf="options.length > 0">
      <ion-radio-group (ionChange)="selectionChanged($event)">
        <ng-container *ngFor="let option of options">
          <ion-item *ngIf="matches(option)">
            <ion-label>{{option.label}}</ion-label>
            <ion-radio (ionSelect)="optionSelected(option)" slot="end"></ion-radio>
          </ion-item>
        </ng-container>
      </ion-radio-group>
    </ng-container>
    <ion-item *ngIf="noMatch()">
      <ion-text class="no-data">{{ 'general,no-match' | translate}}</ion-text>
    </ion-item>

  </ion-list>

  <!-- absolute at bottom icons-->
  <ion-grid class="buttons">
    <ion-row class="ion-justify-content-center">
      <ion-col [size]="5">
        <ion-button expand="block" (click)="cancelSelection()" color="secondary"> {{'general,cancel' | translate }}</ion-button>
      </ion-col>
      <ion-col [size]="5">
        <ion-button [disabled]="!selectedOption" expand="block" (click)="submitSelection()">
          {{'general,ok' |translate}}</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <div style="height: 0.3cm"></div>
</ion-content>