<div class="lore-page">

  <div class="lore-hero">
    <lucide-icon [img]="BookOpen" [size]="56" class="hero-icon"></lucide-icon>
    <h1>{{ 'lore.heroTitle' | translate }}</h1>
    <p class="hero-subtitle">{{ 'lore.heroSubtitle' | translate }}</p>
  </div>

  <div class="lore-grid">

    @for (lore of lores; track lore) {
      <div class="lore-card" (click)="navigateToDetail(lore.id!)">
        <div class="card-header">
          <lucide-icon [img]="Folder" [size]="20" class="card-icon"></lucide-icon>
          <span class="card-date">{{ 'lore.cardDate' | translate }}</span>
        </div>
        <h2>{{ lore.name }}</h2>
        <p class="card-description">{{ lore.description }}</p>
        <div class="card-stats">
          <span>📄 {{ 'lore.statPages' | translate:{ n: (lore.pageCount || 0) } }}</span>
          <span>🌳 {{ 'lore.statFolders' | translate:{ n: (lore.nodeCount || 0) } }}</span>
        </div>
      </div>
    }

    <div class="lore-card card-new" (click)="openCreateModal()">
      <div class="new-icon">
        <lucide-icon [img]="Plus" [size]="20"></lucide-icon>
      </div>
      <h2>{{ 'lore.newLore' | translate }}</h2>
      <p class="card-description">{{ 'lore.newLoreSubtitle' | translate }}</p>
    </div>

  </div>

  <p class="tip">{{ 'lore.tip' | translate }}</p>

</div>

@if (showCreateModal) {
  <app-lore-create
    (close)="onModalClose()"
    (created)="onLoreCreated($event)">
  </app-lore-create>
}
