@extends('new_app.header')
@section('content')
<section class="game-tab">

    <main class="content-wrapper game-content">
        <div class="game-container">




            <div class="game-buttons d-flex flex-wrap justify-content-center">
                @foreach ($games as $game)
                    <a href="{{ route('view.game.chart', ['gamName' => $game->game_name]) }}" class="game-button d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <span class="status-dot green"></span>
                            {{ $game->game_name }}
                        </div>
                        <div class="play-icon-div">
                            <i class="bi bi-calendar3 play-icon"></i>
                        </div>
                    </a>
                @endforeach
            </div>

        </div>

        <style>
            .home{
                padding: 0;
            }
            .game-container {
                background: var(--primary);
                padding: 15px;
                height: 45em;
            }

            .game-timer {
                color: white;
                text-align: center;

                font-weight: bold;
                font-size: 1.1em;
            }

            .game-buttons {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .game-button {
                background: white;
                color: #333;
                padding: 12px 15px;
                text-decoration: none;
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: 500;
                font-size: 1em;
                transition: all 0.3s ease;
            }

            .status-dot {
                width: 17px;
                height: 17px;
                border-radius: 50%;
                margin-right: 6px;
                margin-left: 6px;
            }

            .status-dot.green {
                background-color: #4CAF50;
            }

            .status-dot.red {
                background-color: #f44336;
            }

            .status-dot.gray {
                background-color: #9e9e9e;
            }

            .game-button:hover {
                transform: translateY(-1px);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
        </style>
    </main>




</section>

@endsection