{{-- In Tailwind CSS, a value of 24 equals 96 pixels (or 6rem) --}}
<div class="chessboard grid w-258 h-180 grid-cols-10 grid-rows-7 relative gap-2"
    style="background-image:url({{ asset('svg/soccerfield.svg') }});">
    @foreach ($grid as $key => $elements)
        @if ($key % 2 == 0)
            @foreach ($elements as $name)
                @if (isset($name['color']))
                    <x-filament::badge color="{{ $name['color'] }}" id="{{ $name['player_id'] }}"
                        class="piece size-24 select-none aspect-square">
                        <div>{{ $name['position'] }}</div>
                        <div class="font-bold text-wrap">{{ $name['name'] }}</div>
                        <div class="text-wrap">{{ $name['info'] }}</div>
                    </x-filament::badge>
                @else
                    <div class="size-24"></div>
                @endif
            @endforeach
        @else
            @foreach ($elements as $pos)
                @if ($pos)
                    <div class="size-24 bg-white/30 inset-shadow-sm">
                        <div class="font-black text-3xl text-center text-white/25 p-3">
                            {{ $pos }}
                        </div>
                    </div>
                @else
                    <div class="size-24"></div>
                @endif
            @endforeach
        @endif
    @endforeach

</div>