@extends('app')
@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach($pois as $poi)
            <div class="flex flex-col mt-6 text-gray-700 bg-white shadow-md bg-clip-border rounded-xl">
                <div class="relative h-56 overflow-hidden text-white shadow-lg bg-clip-border bg-blue-gray-500 shadow-blue-gray-500/40 rounded-t-xl">
                    <img
                        class="h-full w-full object-cover object-center"
                        src="{{ $poi->titleImage }}"
                        alt="card-image" />

                    <!-- bg-green-500 for open, bg-red-500 for closed -->
                    <div class="absolute top-2 right-2 px-2 py-1 text-xs font-bold text-white bg-{{ $poi->isOpen() ? 'green' : 'red' }}-500 rounded-full">
                        {{ $poi->isOpen() ? 'Open' : 'Closed' }}
                    </div>

                    <!-- bg-blue-500 for wait time, bg-gray-500 with strikethrough if closed -->
                    <div class="absolute top-2 left-2 px-2 py-1 text-xs font-bold text-white bg-{{ $poi->isOpen() ? 'blue' : 'gray' }}-500 rounded-full {{ $poi->isOpen() ? '' : 'line-through' }}">
                        {{ $poi->queueTime() }} min
                    </div>
                </div>
                <div class="p-6">
                    <h5 class="flex mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
                        {{ $poi->title }}
                    </h5>
                    <p class="flex font-sans text-base antialiased font-light leading-relaxed text-inherit">
                        {{ $poi->description }}
                    </p>
                </div>
                <div class="p-6 pt-0 flex text-sm items-end flex-1 gap-1">
                    @foreach($poi->getTags() as $tag)
                        <span class="relative group px-2 py-1 text-xs font-bold text-white bg-blue-500 rounded-full">
                            {{ $poi->getTagEmote($tag) }}
                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block px-2 py-1 text-xs text-white bg-black rounded">
                                {{ $poi->getTagDescription($tag) }}
                            </span>
                        </span>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
@endsection