<ion-header>
  <ion-toolbar>
    <ion-title *ngIf="!isSearching">首页</ion-title>
    <ion-searchbar *ngIf="isSearching" [(ngModel)]="searchQuery" (ionInput)="filterChats()" placeholder="搜一搜"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button *ngIf="isSearching" (click)="hideSearch()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
      <ion-button *ngIf="!isSearching" (click)="showSearch()">
        <ion-icon name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="!isSearching">
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="online">
        <ion-label>线上陪玩</ion-label>
      </ion-segment-button>
      <ion-segment-button value="offline">
        <ion-label>线下陪玩</ion-label>
      </ion-segment-button>
    </ion-segment>

    <div *ngIf="selectedSegment === 'online'" class="scroll-container">
      <div class="scroll-content">
        <ion-chip>
          <ion-label>王者荣耀</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>永劫无间</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>CS:GO</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>steam专区</ion-label>
        </ion-chip>
      </div>
    </div>

    <div *ngIf="selectedSegment === 'offline'" class="scroll-container">
      <div class="scroll-content">
        <ion-chip>
          <ion-label>篮球</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>台球</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>羽毛球</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>钓鱼</ion-label>
        </ion-chip>
      </div>
    </div>

    <ion-list>
      <ion-list-header>
        <ion-label>陪玩类型</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-chip>
          <ion-label>技术大神</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>包赢承诺</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>优质声优</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>同城代练</ion-label>
        </ion-chip>
        <ion-chip>
          <ion-label>娱乐球局</ion-label>
        </ion-chip>
      </ion-item>
    </ion-list>

    <ion-list>
      <ion-list-header>
        <ion-label>推荐的陪玩</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let player of recommendedPlayers">
        <ion-avatar slot="start">
          <img [src]="player.avatar" />
        </ion-avatar>
        <ion-label>
          <h2>{{ player.name }}</h2>
          <p>{{ player.info }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>

  <div *ngIf="isSearching">
    <ion-list>
      <ion-item>
        <ion-label>历史搜索</ion-label>
      </ion-item>
      <ion-item *ngFor="let history of searchHistory">
        <ion-label>{{ history }}</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>猜你想搜</ion-label>
      </ion-item>
      <ion-item *ngFor="let suggestion of searchSuggestions">
        <ion-label [innerHTML]="suggestion"></ion-label>
      </ion-item>
      <ion-item>
        <ion-label>热门房间</ion-label>
      </ion-item>
      <div class="room-container">
        <div *ngFor="let room of popularRooms" class="room-box">
          <img [src]="room.image" />
          <div>{{ room.title }}</div>
          <div>{{ room.subtitle }}</div>
        </div>
      </div>
    </ion-list>
  </div>
</ion-content>
