@extends('layouts.main')

@section('breadcrumbs')
    @if(isset($brand) and $brand instanceof \App\Models\Manufacturer)
        @if(isset($generation) and $generation instanceof \App\Models\Generation)
            {{ Breadcrumbs::render('generation', ['manufacturer' => $brand, 'model' => $model, 'generation' => $generation]) }}
        @elseif(isset($model) and $model instanceof \App\Models\CarModel)
            {{ Breadcrumbs::render('model', ['manufacturer' => $brand, 'model' => $model]) }}
        @else
            {{ Breadcrumbs::render('manufacturer', $brand) }}
        @endif
    @endif
@endsection

@section('content')
    <div class="container-default mx-auto px-5 xl:px-0">
        @if(isset($brand) and $brand instanceof \App\Models\Manufacturer)
            <h1 class="text-4xl font-bold dark:text-white mb-5 flex items-center">
                @if($brand->image)
                    <img class="w-14 mr-2" src="{{ $brand->image }}" alt="{{ $brand->name }}" loading="lazy" />
                @endif
                <span>{{ $brand->name }}</span>
                @if(isset($model))
                    <span class="text-blue-600 pl-2">{{ $model->name }}</span>
                @endif
                @if(isset($generation))
                    <span class="text-green-600 pl-2">{{ $generation->name }}</span>
                @endif
            </h1>
        @endif
        @if(isset($cars) and $cars->count())
            <div class="flex flex-col xl:grid sm:grid grid-cols-1 xl:grid-cols-3 sm:grid-cols-2 xl:gap-7 sm:gap-5">
                @foreach($cars as $car)
                    <x-car-card :car="$car" />
                @endforeach
            </div>
        @else
            <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
                {{ __('app.please_wait_cars') }}
            </div>
            <div role="status" class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center">
                <div class="flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700">
                    <svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                        <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
                    </svg>
                </div>
                <div class="w-full">
                    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"></div>
                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"></div>
                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"></div>
                    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
                </div>
                <span class="sr-only">{{ __('app.loading') }}</span>
            </div>
        @endif
        <div class="mt-5">
            {{ $cars->links() }}
        </div>
    </div>
@endsection