<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button (click)="goBack()"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ poem?.get('title') || '诗词详情' }}</ion-title>
  </ion-toolbar>
</ion-header>

<!-- 背景图层 -->
<div class="background"></div>

<!-- 内容层 -->
<ion-content class="content-container">
  <div *ngIf="loading" class="loading">
    <p>加载中...</p>
  </div>
  <div *ngIf="error" class="error">
    <p>{{ error }}</p>
  </div>
  <article *ngIf="poem" class="poem-detail">
    <header class="poem-header">
      <h1 class="poem-title">{{ poem.get('title') }}</h1>
      <span class="poem-theme">{{ poem.get('theme') }}</span>
      <p class="poem-creation-time">{{ poem.get('creation_time') }}</p>
      <p class="poem-author">{{ poem.get('autor') }}</p>
    </header>
    <section class="poem-content">
      <div class="poem-text">
        <p [ngStyle]="{'white-space': 'pre-wrap'}">{{ poem.get('content') }}</p>
      </div>
      <hr>
      <div class="poem-info">
        <p><strong>情感:</strong> {{ poem.get('emotion') }}</p>
        <p><strong>背景:</strong> {{ poem.get('background') }}</p>
        <p><strong>摘要:</strong> {{ poem.get('sumary') }}</p>
        <p><strong>标签:</strong> {{ poem.get('tags') }}</p>
        <p><strong>翻译:</strong> {{ poem.get('translation') }}</p>
        <p><strong>语言:</strong> {{ poem.get('language') }}</p>
      </div>
    </section>
  </article>
</ion-content>
