@php
    use Illuminate\Support\Carbon;

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

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

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

    $text = $m->diffForHumans($e, ['parts' => 2], true);
@endphp

<div>
    <div class="grid grid-cols-3 gap-4 text-center mt-4 mb-10">
        <div></div>
        <div>Starttime Difference</div>
        <div></div>
        <div class="bg-gray-100 dark:bg-gray-700 p-1 border dark:border-gray-800 rounded-lg">
            {{ $e->format('d-m-y H:i') }}</div>
        @if ($seconds == 0)
            <div class="bg-green-100 text-green-500 p-1 border rounded-lg flex justify-center gap-1">
                <span>Matching</span>
                <x-phosphor-smiley class="w-5 h-5" />
            </div>
        @elseif ($seconds < 1800 && $seconds > -1800)
            <div
                class="bg-blue-100  dark:bg-blue-300 text-blue-500  dark:text-blue-600
                    p-1 border rounded-lg">
                {{ $text }}</div>
        @elseif ($seconds < 7200 && $seconds > -7200)
            <div class="bg-amber-100 dark:bg-amber-300 text-amber-500 dark:text-amber-600 p-1 border rounded-lg">
                {{ $text }}</div>
        @else
            <div class="bg-red-100 dark:bg-red-300 text-red-500 dark:text-red-600 p-1 border rounded-lg">
                {{ $text }}</div>
        @endif
        <div class="bg-gray-100 dark:bg-gray-700 p-1 border dark:border-gray-800 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>
        {{-- @click="swop()" --}}

        <div class="row-span-2 text-center py-auto">
            <div x-data="{ elements_swopped: false, toggle_icon() { this.elements_swopped = !this.elements_swopped } }" x-init="elements_swopped = true">
                <span wire:click="toggle_icon()">
                    <x-filament::button color="gray" outlined wire:click="swop_elements"
                        onkeydown="return event.key != 'Enter';">
                        <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>
                </span>
            </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>