<ion-header>
  <ion-toolbar mode="ios" class="sant">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Vihaar information</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sant">
  <ion-segment [(ngModel)]="isPastVihar" mode="md">
    <ion-segment-button value="upcoming">
      <ion-label>Upcoming</ion-label>
    </ion-segment-button>
    <ion-segment-button value="past">
      <ion-label>Completed</ion-label>
    </ion-segment-button>
  </ion-segment>
  <div class="detail" [ngSwitch]="isPastVihar">
    <div class="bottom-bg-location" *ngSwitchCase="'upcoming'">
      <h3 *ngIf="noUpcomingFlag && upcomingViharList?.length === 0" class="ion-text-center">
        <img src="/assets/images/welcome-sant.svg">
        <p>No upcoming Vihaar. If you know, please add as it will benefit all Shravaks.</p>
      </h3>
      <ion-card *ngFor="let vihar of upcomingViharList; let index = index">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="location" (click)="address(vihar, 'from')"></ion-icon>
            <div class="right-data">
              <ion-button size="small" slot="end" id="trigger-button" (click)="onUpdateVihar(vihar)"
                *ngIf="vihar?.is_owner && !isStarted(vihar?.start_date, vihar?.start_time)" mode="md">
                <ion-icon name="pencil"></ion-icon>
              </ion-button>
              <ion-button size="small" class="delete" slot="end" id="trigger-button"
                (click)="deleteVihaar(vihar, index)"
                *ngIf="vihar?.is_owner && !isStarted(vihar?.start_date, vihar?.start_time)" mode="md">
                <ion-icon name="trash"></ion-icon>
              </ion-button>
              <p>From</p>
              <h5 (click)="address(vihar, 'from')">{{ vihar.from }}</h5>
              <p>{{ vihar.start_date | date: 'dd-MM-yyyy' }} | {{ formatAMPM(vihar.start_time) }}</p>
            </div>
          </ion-card-title>
          <ion-card-title>
            <ion-icon name="location" (click)="address(vihar, 'to')"></ion-icon>
            <div class="right-data">
              <p>To</p>
              <h5 (click)="address(vihar, 'to')">{{ vihar.to }}</h5>
            </div>
          </ion-card-title>
          <div class="live-label blink_me" *ngIf="vihar.live_vihar">Live</div>
        </ion-card-header>
        <ion-card-content>
          <div *ngIf="vihar.updated_by">
            <p>Edit by: <span>{{ vihar.updated_by.name }}</span></p>
            <p>{{ vihar.updated_ago }}</p>
          </div>
          <div *ngIf="vihar?.updated_by?.mobile" class="contact-icon">
            <p>Contact: <span (click)="makeCall(vihar?.updated_by?.country_code + vihar?.updated_by?.mobile)">{{
                vihar?.updated_by?.country_code }}{{ vihar?.updated_by?.hide_mobile }} <ion-icon name="call"></ion-icon>
              </span></p>
          </div>
          <div>
            <p>Added by: <span>{{ vihar?.created_by?.name ? vihar?.created_by?.name : 'Global Jain Member' }}</span></p>
            <p>{{ vihar.created_ago }}</p>
          </div>
          <div *ngIf="vihar?.created_by?.mobile && !vihar?.updated_by?.mobile" class="contact-icon">
            <p>Contact: <span (click)="makeCall(vihar?.created_by?.country_code + vihar?.created_by?.mobile)">{{
                vihar?.created_by?.country_code }}{{ vihar?.created_by?.hide_mobile }} <ion-icon name="call"></ion-icon>
              </span></p>
          </div>
        </ion-card-content>
      </ion-card>
      <ion-infinite-scroll threshold="250px" (ionInfinite)="loadUpcomingData($event)"
        *ngIf="upcomingPageNumber <= upcomingTotalPage">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>
    <div class="bottom-bg-location" *ngSwitchCase="'past'">
      <h3 *ngIf="noPastFlag && pastViharList?.length === 0" class="ion-text-center"><img
          src="/assets/images/welcome-sant.svg">
        <p>No past Vihaar details found</p>
      </h3>
      <ion-card *ngFor="let vihar of pastViharList">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="location" (click)="address(vihar, 'from')"></ion-icon>
            <div class="right-data">
              <p>From</p>
              <h5 (click)="address(vihar, 'from')">{{ vihar.from }}</h5>
              <p>{{ vihar.start_date | date: 'dd-MM-yyyy' }} | {{ formatAMPM(vihar.start_time) }}</p>
            </div>
          </ion-card-title>
          <ion-card-title>
            <ion-icon name="location" (click)="address(vihar, 'to')"></ion-icon>
            <div class="right-data">
              <p>To</p>
              <h5 (click)="address(vihar, 'to')">{{ vihar.to }}</h5>
            </div>
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div *ngIf="vihar.updated_by">
            <p>Edit by: <span>{{ vihar.updated_by.name }}</span></p>
            <p>{{ vihar.updated_ago }}</p>
          </div>
          <div>
            <p>Added by: <span>{{ vihar?.created_by?.name ? vihar?.created_by?.name : 'Global Jain Member' }}</span></p>
            <p>{{ vihar.created_ago }}</p>
          </div>
        </ion-card-content>
      </ion-card>
      <ion-infinite-scroll threshold="250px" (ionInfinite)="loadPastData($event)"
        *ngIf="pastPageNumber <= pastTotalPage">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>
  </div>
  <ion-fab horizontal="end" vertical="bottom" slot="fixed">
    <ion-fab-button id="add-trigger-button" (click)="onAddVihar()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
