<ion-header>
  <ion-toolbar class="custom-header">
    <ion-buttons slot="start" style="color: white;">
      <ion-back-button (click)="back()"></ion-back-button>
    </ion-buttons>
    <ion-title class="header-title">法律文书详情</ion-title>
    <ion-buttons slot="end">
      <ion-button class="search-button">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </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="info-card">
      <ion-card-content>
        <h2 class="section-title">
          <ion-icon name="document-text-outline" class="title-icon"></ion-icon>
          文书描述
        </h2>
        <p class="document-description">{{book?.get('description') || '暂无详细描述'}}</p>
        
        <div class="meta-info">
          <div class="meta-item">
            <ion-icon name="time-outline"></ion-icon>
            <span>更新日期: {{book?.get('updateDate') | date:'yyyy-MM-dd'}}</span>
          </div>
          <div class="meta-item">
            <ion-icon name="file-tray-outline"></ion-icon>
            <span>分类: {{book?.get('category')}}</span>
          </div>
        </div>
      </ion-card-content>
    </ion-card>

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

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

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