@if ($apartment['active'] === "1")
    <a href="{{ $apartment['url'] }}" class="flex flex-col overflow-hidden bg-white shadow-lg rounded-3xl">
        <div class="relative">
            <div
                class="absolute left-0 z-10 px-4 py-2 text-lg font-bold text-white top-6 rounded-r-md bg-laurel font-headline">
                {{ $apartment['name'] }}
            </div>
            @if ($apartment['is_penthouse'])
                <div class="absolute right-0 z-10 px-4 py-1 text-white top-7 rounded-l-md bg-atlantis">
                    Penthouse
                </div>
            @endif
            <img src="{{ $apartment['thumb_img'] }}" alt="{{ $apartment['name'] }}" width="640" height="640"
                class="w-full h-auto">
        </div>
        <div class="h-2 bg-gradient"></div>
        <div class="flex-1 p-6">
            <div class="grid grid-cols-3 gap-3 mb-6 md:grid-cols-3">
                <div>
                    <div class="text-sm text-sage">{{ __('Épület') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['building'] }}</div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Emelet') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['floor'] == 0 ? __('Fsz') : $apartment['floor'] }}.
                    </div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Szoba') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['rooms'] }}</div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Alapterület') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['size'] }} {!! __('m<sup>2</sup>') !!}</div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Terasz') }}</div>
                    <div class="text-lg font-bold">
                        @if ($apartment['terrace'] > 0)
                            {{ $apartment['terrace'] }} {!! __('m<sup>2</sup>') !!}
                        @else
                            -
                        @endif
                    </div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Kert') }}</div>
                    <div class="text-lg font-bold">
                        @if ($apartment['garden'] > 0)
                            {{ $apartment['garden'] }} {!! __('m<sup>2</sup>') !!}
                        @else
                            -
                        @endif
                    </div>
                </div>
            </div>
            <div>
                <div class="w-full button">
                    <span>
                        <span class="flex items-center justify-center gap-2">
                            <span>{{ __('Megtekintés') }}</span>
                            <x-frontend.icons.arrow-up-right stroke="3" class="size-4" />
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </a>
@else
    <div class="flex flex-col overflow-hidden shadow-lg bg-gray-50 rounded-3xl">
        <div class="relative">
            <div
                class="absolute left-0 z-10 px-4 py-2 text-lg font-bold text-white bg-gray-400 top-6 rounded-r-md font-headline">
                {{ $apartment['name'] }}
            </div>
            @if ($apartment['is_penthouse'])
                <div class="absolute right-0 z-10 px-4 py-1 text-white bg-gray-400 top-7 rounded-l-md">
                    Penthouse
                </div>
            @endif
            <img src="{{ $apartment['thumb_img'] }}" alt="{{ $apartment['name'] }}" width="640" height="640"
                class="w-full h-auto grayscale">
        </div>
        <div class="h-2 bg-gradient-to-r from-gray-400 to-gray-200"></div>
        <div class="flex-1 p-6">
            <div class="grid grid-cols-3 gap-3 mb-6 md:grid-cols-3">
                <div>
                    <div class="text-sm text-sage">{{ __('Épület') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['building'] }}</div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Emelet') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['floor'] == 0 ? __('Fsz') : $apartment['floor'] }}.
                    </div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Szoba') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['rooms'] }}</div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Alapterület') }}</div>
                    <div class="text-lg font-bold">{{ $apartment['size'] }} {!! __('m<sup>2</sup>') !!}</div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Terasz') }}</div>
                    <div class="text-lg font-bold">
                        @if ($apartment['terrace'] > 0)
                            {{ $apartment['terrace'] }} {!! __('m<sup>2</sup>') !!}
                        @else
                            -
                        @endif
                    </div>
                </div>
                <div>
                    <div class="text-sm text-sage">{{ __('Kert') }}</div>
                    <div class="text-lg font-bold">
                        @if ($apartment['garden'] > 0)
                            {{ $apartment['garden'] }} {!! __('m<sup>2</sup>') !!}
                        @else
                            -
                        @endif
                    </div>
                </div>
            </div>
            <div>
                <div class="w-full rounded-full border-2 border-gray-400 bg-gray-200 px-5 py-2.5 text-center font-bold">
                    {{ __('Eladva') }}
                </div>
            </div>
        </div>
    </div>
@endif