<ion-content fullscreen>
  <ion-grid style="scroll-padding-bottom: 0px;">
    <ion-row>
      <ion-col>
        <div>
          <h4 style="font-weight: bold;">{{ welcomeName }}</h4>
        </div>
      </ion-col>
      <ion-col>
        <div style="text-align: right;">
          <h4>{{ currentDateFormated }}</h4>
        </div>
      </ion-col>
    </ion-row>
    <ion-row style="height: 60px; padding-top: 0px; font-size: 40px; text-align: center; background-color: white; ">
      <ion-col >
        <ion-icon  name="people-outline" (click)="goPracticepatients()" ></ion-icon>
      </ion-col>
      <ion-col>
        <ion-icon name="medkit-outline" (click)="goOpenCare()"></ion-icon>
      </ion-col>
      <ion-col>
       
        <ion-icon name="card-outline"  (click)="goWallet()"></ion-icon>
      </ion-col>
    </ion-row>
  </ion-grid>


  <ion-list>
    <ion-list-header>
      <h3 style="font-weight: bold;">Pending Consult(s)</h3>
    </ion-list-header>

    <ion-item *ngFor="let type of pendingEncounterData"  (click)="goPatient(type)">
      <ion-avatar slot="start">
        <img src="./../../assets/imgs/avatar{{type.gender}}.png">
      </ion-avatar>
      <ion-label>
        <h3 style="font-weight: bold;color: #8e54e9;">{{type.appt}} {{type.gender}} , {{type.age}} yrs</h3>
        <h3>{{type.firstname}} {{type.lastname}}</h3>
        <h3>{{type.reason}}</h3>
      </ion-label>
    </ion-item>

   
  </ion-list>

  <ion-list>
    <ion-list-header>
      <h3 style="font-weight: bold;">Recent Consult(s)</h3>
    </ion-list-header>

    <ion-item *ngFor="let type of cardData"  (click)="goSelectPatient(type)">
      <ion-label>
        <h3 style="font-weight: bold;color: #8e54e9;">{{type.appt}} {{type.gender}} , {{type.age}} yrs</h3>
        <h2>{{type.firstname}} {{type.lastname}}</h2>
      </ion-label>
    </ion-item>

   
  </ion-list>












</ion-content>

<!-- Footer without a border -->
<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-grid style="font-size: 25px; text-align: center;">
      <ion-row>
        <ion-col>
          <div>
            <ion-icon name="home"></ion-icon>
          </div>
        </ion-col>
        <ion-col>
          <div>
            <ion-icon name="calendar" style="color:#8e54e9;" (click)="goCalendar()"></ion-icon>
          </div>
        </ion-col>
        <ion-col>
          <div>
            <ion-icon name="wallet" style="color:#8e54e9;" (click)="goWallet()"></ion-icon>
          </div>
        </ion-col>

        <ion-col>
          <div>
            <ion-icon name="settings" style="color:#8e54e9;" (click)="goSettings()"></ion-icon>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

  </ion-toolbar>
</ion-footer>