@php
    use Illuminate\Support\Carbon;

    $e = Carbon::parse($event->starttime);
    $m = Carbon::parse($mapper->starttime);

    $seconds = $e->diffInSeconds($m);

    $diff = gmdate('H:i:s', $seconds);

    if ($seconds == 0) {
        $color = 1;
    } elseif ($seconds < 1800) {
        $color = 2;
    } elseif ($seconds < 7200) {
        $color = 3;
    } else {
        $color = 4;
    }

@endphp

<div>
    <div class="grid grid-cols-3 gap-4 text-center mt-4 mb-10">
        <div></div>
        <div>Startime Difference</div>
        <div></div>
        <div class="bg-gray-100 p-1 border rounded-lg">{{ $e->format('d-m-y H:i') }}</div>
        @switch($color)
            @case(1)
                <div class="bg-green-100 text-green-500 p-1 border rounded-lg">{{ $diff }}</div>
            @break

            @case(2)
                <div class="bg-blue-100 text-blue-500 p-1 border rounded-lg">{{ $diff }}</div>
            @break

            @case(3)
                <div class="bg-amber-100 text-amber-500 p-1 border rounded-lg">{{ $diff }}</div>
            @break

            @case(4)
                <div class="bg-red-100 text-red-500 p-1 border rounded-lg">{{ $diff }}</div>
            @break
        @endswitch
        <div class="bg-gray-100 p-1 border rounded-lg">{{ $m->format('d-m-y H:i') }}</div>
        <div class="col-span-3 flex justify-center gap-2 mt-6">
            <div>
                @if ($event->country?->iso2)
                    <x-icon name="flag-country-{{ $event->country->iso2 }}" class="h5 w-5 mt-1" />
                @elseif($event->country?->icon)
                    <x-icon name="{{ $event->country->icon }}" class="h5 w-5 mt-1" />
                @endif
            </div>
            <div>{{ $event->country?->name }}</div>
            <div>{{ $event->competition_group->name }}</div>
        </div>

        <div class="pt-2 font-bold text-right">{{ $event->home->name }}</div>

        <div class="row-span-2 text-center py-auto">
            <div x-data="{ elements_swopped: false, toggle() { this.elements_swopped = !this.elements_swopped } }" x-init="elements_swopped = true">
                <x-filament::button color="gray" outlined @click="toggle()" wire:click="toggle()">
                    <div x-show="elements_swopped">
                        <x-icon-paralell class="h-14 w-14 mx-auto" />
                    </div>
                    <div x-show="!elements_swopped">
                        <x-icon-crossed class="h-14 w-14 mx-auto" />
                    </div>
                </x-filament::button>
            </div>
        </div>

        <div class="pt-2 font-bold text-left">{{ $mapper->home }}</div>

        <div class="mb-2 font-bold text-right">{{ $event->away->name }}</div>

        <div class="pb-2 font-bold text-left">{{ $mapper->away }}</div>
    </div>
</div>