  
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>法律文书库</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 分类卡片 -->
  <ion-list>
    <ion-list-header>
      <ion-label>文书分类</ion-label>
    </ion-list-header>
    
    <ion-grid>
      <ion-row>
        @for(documentCategory of categorieList; track documentCategory){
          <ion-col size="6" size-md="4" size-lg="3">
            <ion-card (click)="goBook(documentCategory)" class="category-card">
              <ion-icon name="document-text-outline" class="category-icon"></ion-icon>
              <ion-card-header>
                <ion-card-title>{{documentCategory.get('name')}}</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                {{documentCategory.get('description') || '暂无描述'}}
              </ion-card-content>
            </ion-card>
          </ion-col>
        }
      </ion-row>
    </ion-grid>
  </ion-list>

  <!-- 精选法律文书 -->
  <ion-list>
    <ion-list-header>
      <ion-label>精选法律文书</ion-label>
    </ion-list-header>
    
    @for(legalDocument of documentList; track legalDocument){
      <ion-item detail="true" lines="full">
        <ion-icon name="document-outline" slot="start" color="primary"></ion-icon>
        <ion-label>
          <h3>{{legalDocument.get('title')}}</h3>
          <p>{{legalDocument.get('description') || '暂无描述'}}</p>
          <p class="meta-info">
            <ion-badge color="light">{{legalDocument.get('docType')}}</ion-badge>
            <span>适用: {{legalDocument.get('applicableScope')}}</span>
          </p>
        </ion-label>
      </ion-item>
    }
  </ion-list>

  <!-- 法律知识 -->
  <ion-list>
    <ion-list-header>
      <ion-label>法律知识</ion-label>
    </ion-list-header>
    
    @for(legalKnowledge of knowledgeList; track legalKnowledge){
      <ion-item detail="true" lines="full">
        <ion-icon name="book-outline" slot="start" color="secondary"></ion-icon>
        <ion-label>
          <h3>{{legalKnowledge.get('title')}}</h3>
          <p>{{legalKnowledge.get('summary') || '暂无摘要'}}</p>
          <p class="meta-info">
            <ion-badge color="light">{{legalKnowledge.get('source')}}</ion-badge>
            <span>{{legalKnowledge.get('publishDate') | date:'yyyy-MM-dd'}}</span>
          </p>
        </ion-label>
      </ion-item>
    }
  </ion-list>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="danger">
      <ion-icon name="cloud-download-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
