@extends('layouts.guru')

@section('title', 'Game Edukasi - SIPENA Guru')
@section('page_title', 'Game Edukasi')

@section('content')
<!-- Page Header -->
<div class="page-header">
    <h1>Game Edukasi</h1>
    <p>Pilih game edukasi yang ingin diakses.</p>
</div>

<!-- Stats Grid -->
<div class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card">
        <div class="stat-icon bg-blue">
            <i class="fa-solid fa-gamepad"></i>
        </div>
        <div class="stat-details">
            <h3>Game Aktif</h3>
            <p class="stat-value">{{ $games->count() }}</p>
        </div>
    </div>
</div>

<!-- Main Grid -->
<div class="main-grid" style="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;">
    @forelse ($games as $game)
        <div class="card">
            <div class="card-header">
                <h3><i class="fa-solid fa-puzzle-piece text-primary"></i> {{ $game->judul }}</h3>
            </div>
            <div class="card-body">
                <p style="color: var(--text-gray); line-height: 1.6; min-height: 74px;">
                    {{ $game->deskripsi ?: 'Game edukasi aktif.' }}
                </p>

                <a href="{{ route('guru.game.main', $game) }}" class="btn btn-primary w-100 mt-4" style="text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="fa-solid fa-play"></i> Mainkan
                </a>
            </div>
        </div>
    @empty
        <div class="card">
            <div class="card-body">
                <p style="color: var(--text-gray);">Belum ada game edukasi aktif.</p>
            </div>
        </div>
    @endforelse
</div>
@endsection