<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Lista de Pacientes
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar placeholder="Pesquise por pacientes aqui" color="new"  [(ngModel)]="searchQuery" (ionInput)="onSearchSubmit($event)"></ion-searchbar>
    <ion-card *ngFor="let paciente of pacientes">
    <ion-card-header>
      <ion-card-title>Informações do paciente</ion-card-title>
      <ion-card-subtitle>Nome: {{ paciente.nome }}</ion-card-subtitle>
      <ion-card-subtitle>CPF: {{ paciente.cpf }}</ion-card-subtitle>
      <ion-card-subtitle>Data de Nascimento: {{ paciente.dataNasci }}</ion-card-subtitle>
      <ion-card-subtitle>Gênero: {{ paciente.genero }}</ion-card-subtitle>
      <ion-card-subtitle>Cidade: {{ paciente.cidade }}</ion-card-subtitle>
      <ion-card-subtitle>Uf: {{ paciente.uf }}</ion-card-subtitle><br>
      <ion-icon name="trash-outline" style="color: red;" (click)="removePaciente(paciente.id ? +paciente.id : undefined)"></ion-icon>
    </ion-card-header>
  </ion-card>
</ion-content>
