<ion-header>
  <ion-toolbar class="custom-header">
    <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" [fullscreen]="true">
  <!-- 搜索栏 -->
  <ion-searchbar placeholder="搜索法律文书..." animated class="custom-searchbar"></ion-searchbar>

  <!-- 分类卡片 -->
  <ion-list lines="none" class="category-list">
    <ion-list-header>
      <ion-label>文书分类</ion-label>
      <ion-button fill="clear" size="small">查看全部</ion-button>
    </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" [style.--card-color]="getCategoryColor($index)">
              <div class="card-icon-wrapper">
                <ion-icon name="document-text-outline" class="category-icon"></ion-icon>
              </div>
              <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 lines="none" class="featured-list">
    <ion-list-header>
      <ion-label>精选法律文书</ion-label>
      <ion-button fill="clear" size="small">更多</ion-button>
    </ion-list-header>
    
    <ion-grid>
      <ion-row>
        @for(legalDocument of documentList; track legalDocument; let i = $index){
          <ion-col size="12" size-md="6" size-lg="4">
            <ion-card class="document-card">
              <ion-card-header>
                <ion-card-title>{{legalDocument.get('title')}}</ion-card-title>
                <ion-card-subtitle>
                  <ion-badge [color]="getDocTypeColor(legalDocument.get('docType'))">
                    {{legalDocument.get('docType')}}
                  </ion-badge>
                </ion-card-subtitle>
              </ion-card-header>
              <ion-card-content>
                <p>{{legalDocument.get('description') || '暂无描述'}}</p>
                <div class="meta-info">
                  <span>适用: {{legalDocument.get('applicableScope')}}</span>
                  <ion-button fill="clear" size="small" (click)="viewDocument(legalDocument)">
                    查看详情
                    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
                  </ion-button>
                </div>
              </ion-card-content>
            </ion-card>
          </ion-col>
        }
      </ion-row>
    </ion-grid>
  </ion-list>

  <!-- 法律知识 -->
  <ion-list lines="none" class="knowledge-list">
    <ion-list-header>
      <ion-label>法律知识</ion-label>
      <ion-button fill="clear" size="small">更多</ion-button>
    </ion-list-header>
    
    @for(legalKnowledge of knowledgeList; track legalKnowledge){
      <ion-item detail="true" lines="full" class="knowledge-item" (click)="viewKnowledge(legalKnowledge)">
        <ion-icon name="book-outline" slot="start" class="knowledge-icon"></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="primary">
      <ion-icon name="cloud-download-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>