<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button (click)="back()"></ion-back-button>
    </ion-buttons>
    <ion-title>法律文书详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div *ngIf="book" class="document-detail-container">
    <!-- 头部卡片 -->
    <ion-card class="document-header-card">
      <ion-card-header>
        <div class="icon-container">
          <ion-img [src]="book?.get('icon')" alt="文书类型图标" class="document-icon"></ion-img>
        </div>
        <ion-card-title class="document-title">{{book?.get('name')}}</ion-card-title>
        <ion-card-subtitle *ngIf="book?.get('isFeatured')" class="featured-badge">
          <ion-chip color="warning">
            <ion-icon name="star"></ion-icon>
            <ion-label>精选</ion-label>
          </ion-chip>
        </ion-card-subtitle>
      </ion-card-header>
    </ion-card>

    <!-- 描述部分 -->
    <ion-card class="description-card">
      <ion-card-content>
        <h2 class="section-title">文书描述</h2>
        <p class="document-description">{{book?.get('description')}}</p>
      </ion-card-content>
    </ion-card>

    <!-- 标签部分 -->
    <ion-card class="tags-card" *ngIf="book?.get('tags')?.length > 0">
      <ion-card-content>
        <h2 class="section-title">相关标签</h2>
        <div class="tags-container">
          <ion-chip *ngFor="let tag of book?.get('tags')" color="medium" outline>
            {{tag}}
          </ion-chip>
        </div>
      </ion-card-content>
    </ion-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <ion-button expand="block" color="primary" shape="round">
        <ion-icon slot="start" name="download"></ion-icon>
        下载模板
      </ion-button>
      <ion-button expand="block" color="secondary" fill="outline" shape="round">
        <ion-icon slot="start" name="create"></ion-icon>
        在线编辑
      </ion-button>
    </div>
  </div>

  <!-- 加载状态 -->
  <div *ngIf="!book" class="loading-container">
    <ion-spinner name="crescent"></ion-spinner>
    <p>正在加载文书详情...</p>
  </div>
</ion-content>