@php
$size = 'h-32 md:h-44 lg:h-52';

$main_class = 'cursor-pointer relative transform-style-3d transition duration-500';
$base_class = "absolute backface-hidden flex items-center justify-center border w-full $size transition duration-500 px-4 py-2";
$frontface_class = "$base_class z-10 bg-gray-100 hover:bg-gray-200 rotate-y-0 transform hover:scale-105";
$backface_class = "$base_class rotate-y-180";

if ($flipped) {
    $main_class .= ' rotate-y-180';
}

if ($win) {
    $backface_class .= ' bg-green-300 hover:bg-green-400 border-green-400';
} else {
    $backface_class .= ' bg-blue-300 hover:bg-blue-400 border-blue-400';
}

@endphp

<div class="{{ $size }} perspective">
    <div {!! $attributes->merge(['class' => $main_class]) !!}>

        {{-- Card frontface --}}
        <div class="{{ $frontface_class }}">
            <h2 class="absolute top-1 left-2 text-xl text-gray-600">#{{ $number }}</h2>
            <p class="text-center">
                <x-card-text :card="$card" />
            </p>
        </div>

        {{-- Card backface --}}
        <div class="{{ $backface_class }}">
            <img class="h-full" src="{{ url('img/logo.png') }}" />
        </div>
    </div>
</div>