@php
    use Illuminate\Support\HtmlString;

@endphp
{{-- In Tailwind CSS, a value of 24 equals 96 pixels (or 6rem) --}}
<div class="w-full">
    <div class="pb-5 flex flex-row justify-between">
        <div class="flex flex-row gap-3">
            <x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
                ATTACK
            </x-filament::button>
            <x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
                MIDFIELD
            </x-filament::button>
            <x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
                DEFENCE
            </x-filament::button>
            <x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
                GOALKEEPER
            </x-filament::button>
        </div>
        <div class="flex flex-row gap-3">
            <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
                Reset
            </x-filament::button>
            <x-filament::button wire:click="openNewUserModal" color="info" icon="phosphor-calculator">
                Calculate
            </x-filament::button>
            <x-filament::button wire:click="openNewUserModal" color="info" icon="phosphor-copy">
                Copy
            </x-filament::button>
        </div>
    </div>
    <div class="chessboard grid w-258 h-182 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>
    {{-- <div class="chessboard grid grid-cols-10 w-240 pr-3 gap-0 bg-no-repeat bg-size-[466px_672px] bg-position-[top_left_476px] overflow-hidden"
        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-22 m-1 z-20 select-none cursor-grab grid grid-cols-1 gap-3 text-xs">
                            <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-22 m-1"></div>
                    @endif
                @endforeach
            @else
                @foreach ($elements as $pos)
                    @if ($pos)
                        <div class="size-22 m-1 bg-white/30 rounded">
                            <div class="font-black text-3xl text-center text-white/25 p-3">
                                {{ $pos }}
                            </div>
                        </div>
                    @else
                        <div class="size-22 m-1"></div>
                    @endif
                @endforeach
            @endif
        @endforeach
    </div> --}}
</div>