<div class="container mx-auto px-4 py-6">
  <h1 class="text-3xl font-bold text-white mb-6">Lootboxen</h1>

  <div *ngIf="isLoading" class="flex justify-center">
    <div class="loader"></div>
  </div>

  <div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
    {{ error }}
  </div>

  <div *ngIf="!isLoading && !error" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div
      *ngFor="let lootbox of lootboxes"
      class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
    >
      <div class="relative">
        <img
          [src]="getBoxImage(lootbox.id)"
          [alt]="lootbox.name"
          class="w-full h-48 object-cover"
        />
        <div class="absolute top-2 right-2 bg-deep-blue px-2 py-1 rounded-full text-white">
          {{ lootbox.price | currency: 'EUR' }}
        </div>
      </div>

      <div class="p-4">
        <h2 class="text-xl font-bold text-white mb-2">{{ lootbox.name }}</h2>

        <div class="mb-4">
          <h3 class="text-lg font-semibold text-white mb-2">Mögliche Gewinne:</h3>
          <ul class="space-y-2">
            <li *ngFor="let reward of lootbox.rewards" class="flex justify-between">
              <span [ngClass]="getRarityClass(reward.probability)">{{
                reward.value | currency: 'EUR'
              }}</span>
              <span class="text-white">{{ formatProbability(reward.probability) }}</span>
            </li>
          </ul>
        </div>

        <div class="mt-4">
          <button
            (click)="openLootbox(lootbox.id)"
            [disabled]="!hasEnoughBalance(lootbox.price)"
            [ngClass]="{
              'button-primary': hasEnoughBalance(lootbox.price),
              'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(lootbox.price),
            }"
            class="w-full py-2 rounded font-semibold"
          >
            <span *ngIf="hasEnoughBalance(lootbox.price)">Öffnen</span>
            <span *ngIf="!hasEnoughBalance(lootbox.price)">Nicht genug Guthaben</span>
          </button>
        </div>
      </div>

      <div class="px-4 pb-4">
        <div class="text-sm text-text-secondary">
          <p>Fairness garantiert - Alle Ergebnisse werden transparent berechnet.</p>
        </div>
      </div>
    </div>
  </div>
</div>
