<div class="gs-page">

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

  <div class="gs-grid">

    @for (gs of gameSystems; track gs) {
      <div class="gs-card" (click)="edit(gs.id!)">
        <div class="card-header">
          <h2>{{ gs.name }}</h2>
          <div class="card-actions">
            <button class="icon-btn" (click)="delete(gs, $event)" [title]="'common.delete' | translate">
              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
            </button>
          </div>
        </div>
        <p class="card-description">{{ gs.description || ('gameSystems.noDescription' | translate) }}</p>
        <div class="card-footer">
          @if (gs.author) {
            <span class="author">{{ 'gameSystems.byAuthor' | translate:{ author: gs.author } }}</span>
          }
          @if (gs.isPublic) {
            <span class="badge-public">{{ 'gameSystems.public' | translate }}</span>
          }
        </div>
      </div>
    }

    <div class="gs-card card-new" (click)="create()">
      <div class="new-icon">
        <lucide-icon [img]="Plus" [size]="20"></lucide-icon>
      </div>
      <h2>{{ 'gameSystems.newSystem' | translate }}</h2>
      <p class="card-description">{{ 'gameSystems.newSystemSubtitle' | translate }}</p>
    </div>

  </div>

  <p class="tip" [innerHTML]="'gameSystems.tip' | translate"></p>

</div>
