<div class="ion-page">
    <ion-header>
        <ion-segment value="all">
            <ion-segment-button value="all" (click)="changeTab('all')">
                <ion-label>不同MBTI宠物</ion-label>
            </ion-segment-button>
            <ion-segment-button value="favorites" (click)="changeTab('favorites')">
                <ion-label>宠物测试</ion-label>
            </ion-segment-button>
        </ion-segment>
    </ion-header>

    <ion-content>
        <ng-container *ngIf="currentTab === 'all'">
            <h4 style="text-align: center;padding: 15px;">宠物mbti</h4>

            <ion-content>
                <ion-grid>
                    <ion-row>
                        <ng-container *ngFor="let course of courseList; let i = index">
                            <ng-container *ngIf="i % 2 === 0">
                                <ion-col size="5.5">
                                        <img alt="Silhouette of mountains" [src]="course?.get('petImg')" />
                                        <ion-card-header>
                                            <ion-card-title>{{course?.get("petName")}}</ion-card-title>
                                        </ion-card-header>
                                </ion-col>
                                <ion-col size="5.5" *ngIf="i + 1 < courseList.length">
                                        <img alt="Silhouette of mountains" [src]="courseList[i + 1].get('petImg')" />
                                        <ion-card-header>
                                            <ion-card-title>{{courseList[i +1].get("petName")}}</ion-card-title>
                                        </ion-card-header>
                                </ion-col>
                            </ng-container>
                        </ng-container>
                    </ion-row>
                </ion-grid>
            </ion-content>
        </ng-container>




        <!-- 宠物测试 -->
        <ng-container *ngIf="currentTab === 'favorites'">
            <h4 style="text-align: center;padding: 15px;">请填写以下信息，以便为你宠物测试</h4>
            <ion-list>
                <ion-item>
                    <ion-select [value]="planOptions.targets" (ionChange)="setOption('targets',$event)"
                        aria-label="object" placeholder="选择你的偏好" [multiple]="true">
                        <ion-select-option value="慵懒休闲">慵懒休闲</ion-select-option>
                        <ion-select-option value="活泼好动">活泼好动</ion-select-option>
                        <ion-select-option value="独立自主">独立自主</ion-select-option>
                    </ion-select>
                </ion-item>               
                <ion-item>
                    <ion-textarea label="你是否有其他信息或补充" labelPlacement="floating" placeholder=" "></ion-textarea>
                </ion-item>
            </ion-list>
            <ion-button  expand="block">生成</ion-button>

        </ng-container>
        <div class="navfooter"> </div>
    </ion-content>
</div>