@php
    use Illuminate\Support\HtmlString;
@endphp

{{-- 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') }});" x-data x-init="
            setTimeout(() => {
                $store.main.loadPlayer({{ json_encode($grid) }});
            }, 1000); ">

  {{-- 0 => array:9 [▼
    "player_id" => 789695
    "name" => "Favio Álvarez"
    "position" => "MIDFIELD"
    "position_color" => "info"
    "color" => "info"
    "info" => "Ev 3, Right, 8 min"
    "type" => ""
    "x" => 104
    "y" => 104

      7 => array:3 [▼
        "type" => "ST"
        "x" => 832
        "y" => 104
    ]
  ] --}}

    @foreach ($grid as $key => $ele)

        @if(isset($ele['player_id']))
            <x-filament::button color="{{ $ele['position_color'] }}" 
                @click="$store.main.console({{$key}})"
                id="{{ $ele['player_id'] }}"
                class="piece relative size-24 select-none aspect-square font-bold rounded"
                    tooltip="{{ $ele['info'] }}">
                <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">{{ $ele['position'] }}</div>
                {{ $ele['name'] }}
            </x-filament::button>
        @elseif($ele['type'])
            <div class="size-24 bg-white/10">
                <div class="font-black text-3xl text-center text-white/25 p-3">
                    {{ $ele['type'] }}
                </div>
            </div>
        @else
            <div class="size-24"></div>
        @endif
    @endforeach
</div>