<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title style="text-align: center;">{{ content?.get('type') }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="content-container">
  <div *ngIf="loading" class="loading">
    <p>加载中...</p>
  </div>
  <div *ngIf="error" class="error">
    <p>{{ error }}</p>
  </div>
  <div *ngIf="content" class="content-detail">
    <div class="issue-time">
      <span class="issue">{{ content.get('issue') }}</span>
      <span class="time">{{ content.get('time') }}</span>
    </div>
    <h2 class="title">{{ content.get('title') }}</h2>
    <h3 class="editor">{{ content.get('editor') }}</h3>
    <img [src]="content.get('image')" class="content-image" />
    <!-- 做if判断 -->
    <div *ngIf="content.get('type')==='音频'" class="audio-container"><audio [src]="content.get('audio')" controls></audio></div>
    <div *ngIf="content.get('type')==='视频'" class="video-container">
      <video [src]="content.get('video')" controls class="responsive-video"></video>
    </div>
    <div class="content-text">
      <span [ngStyle]="{'white-space': 'pre-wrap'}">{{ content.get('detail') }}</span>
    </div>
    <div class="actions">
      <ion-button (click)="toggleLike()">
        <ion-icon [name]="content?.get('is_liked') ? 'heart' : 'heart-outline'"></ion-icon>
        {{ content?.get('is_liked') ? '已喜欢' : '喜欢' }}
      </ion-button>
      <ion-button (click)="toggleFavorite()">
        <ion-icon [name]="content?.get('is_favorite') ? 'bookmark' : 'bookmark-outline'"></ion-icon>
        {{ content?.get('is_favorite') ? '已收藏' : '收藏' }}
      </ion-button>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button  (click)="prevContent()">前一期</ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button  (click)="nextContent()">后一期</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
