@php
$card_class = 'absolute backface-hidden flex items-center justify-center border w-full h-52 transition duration-500 px-4 py-2'
@endphp

<div class="container mx-auto mt-4 sm:mt-4 md:mt-10 lg:mt-8">

    <div class="flex justify-between items-center mb-4 md:mb-8">

        <div class="flex items-end space-x-2">
            <h2 class="text-2xl text-gray-600">Winning rows:</h2>
            <p class="text-blue-600 text-4xl">{{ $this->state->getNumWinRows() }}</p>
        </div>

        <div class="space-x-2">
            <x-button type="success" wire:click="restart">{{ __('New Game') }}</x-button>
            <x-button type="warning" href="{{ url('/setup') }}">{{ __('Change Settings') }}</x-button>
            <x-button type="danger" wire:click="clear">{{ __('Clear') }}</x-button>
        </div>
    </div>

    {{-- Gameboard grid --}}
    <div class="mt-2 grid grid-cols-4 gap-4">
        @foreach($this->board->getCards() as $pos => $item)
        <x-card :number="$pos + 1" :card="$item"
            :win="$this->state->isWin($pos)"
            :flipped="$this->state->isPressed($pos)"
            wire:click="toggle({{ $pos }})" />
        @endforeach
    </div>

    {{-- Loading modal --}}
    <div wire:loading.delay>
        <x-modal>
            <h2 class="text-6xl">{{ __('Loading') }}</h2>
        </x-modal>
    </div>

    @if ($this->board->hasGameEnded())
    <x-modal wire:loading.remove>
        <h2 class="text-6xl mb-12">{{ __('Game over!') }}</h2>
        <div class="flex justify-between space-x-2">
            <x-button type="info" wire:click="clear">{{ __('Go again?') }}</x-button>
            <x-button type="success" wire:click="restart">{{ __('New Game') }}</x-button>
        </div>
    </x-modal>
    @endif
</div>