<ion-header>
    <ion-toolbar mode="ios" class="sangh">
        <ion-buttons slot="start">
            <ion-back-button mode="md"></ion-back-button>
        </ion-buttons>
        <ion-title class="back-btn">Chaturmas Vihaar Information</ion-title>
    </ion-toolbar>
</ion-header>



<ion-content class="sant">

    <div class="add-vihar">
        <ion-button mode="md" class="si" expand="block" (click)="onSant()">ADD CHATURMAS / VIHAR</ion-button>
    </div>

    <ion-segment [(ngModel)]="viharType" mode="md">
        <ion-segment-button value="chaturmas">
            <ion-label>Chaturmas</ion-label>
        </ion-segment-button>
        <ion-segment-button value="vihar">
            <ion-label>Vihar</ion-label>
        </ion-segment-button>
    </ion-segment>

    <div class="detail" [ngSwitch]="viharType">
        <div class="bottom-bg-location" *ngSwitchCase="'chaturmas'">
            <h3 *ngIf="sanghData?.chaturmas?.length === 0" class="ion-text-center">
                <img src="/assets/images/welcome-sangh.svg">
                <p>No Chaturmas details found. If you know, please add and admin will verify.</p>
            </h3>
            <ion-card>
                <ion-list *ngFor="let item of sanghData?.chaturmas; let index = index">
                    <ion-item (click)="santProfile(item.sant.id)">
                        <ion-avatar slot="start">
                            <img alt="Silhouette of a person's head" [src]="item?.sant?.avatar" />
                        </ion-avatar>
                        <ion-label>
                            <h3>{{ item?.sant?.name }}
                                <p *ngIf="item.year"><span>Year:</span>
                                    <strong>
                                        <span>{{item.year}}</span>
                                    </strong>
                                </p>
                            </h3>
                        </ion-label>
                    </ion-item>
                </ion-list>
            </ion-card>
        </div>
        <div class="bottom-bg-location" *ngSwitchCase="'vihar'">
            <h3 *ngIf="sanghData?.vihar?.length === 0" class="ion-text-center">
                <img src="/assets/images/welcome-sangh.svg">
                <p>No upcoming Vihaar. If you know, please add as it will benefit all Shravaks.</p>
            </h3>
            <ion-card>
                <ion-list *ngFor="let item of sanghData?.vihar; let index = index">
                    <ion-item (click)="santProfile(item.sant.id)">
                        <ion-avatar slot="start">
                            <img alt="Silhouette of a person's head" [src]="item.sant?.avatar" />
                        </ion-avatar>
                        <ion-label>
                            <h3>{{ item?.sant?.name }}
                                <p *ngIf="item.start_date"><span>Date:</span>
                                    <strong>
                                        <span>{{item.start_date}}</span>
                                    </strong>
                                </p>
                            </h3>
                        </ion-label>
                    </ion-item>
                </ion-list>
            </ion-card>
        </div>
    </div>
</ion-content>