@extends('layouts.main')

@section('content')
    <div class="container-default mx-auto px-5 xl:px-0 wrapper-catalog-page">
        @if($title)
            <h1 class="text-4xl font-bold mb-5 flex items-center">
                {{ $title }}
                @if(!$is_home and !config('app.max_page'))
                    <span class="qty-results-search text-xl ml-3 text-gray-500">({{ number_format($cars->total(), 0, ',', ' ') }})</span>
                @endif
            </h1>
        @endif
        <button onclick="document.getElementById('filters-wrapper').classList.add('opened');document.getElementById('overlay').classList.add('opened');" id="btn-filters" type="button" class="btn-open-filters px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            <svg class="w-3.5 h-3.5 text-white mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                <path d="M18.85 1.1A1.99 1.99 0 0 0 17.063 0H2.937a2 2 0 0 0-1.566 3.242L6.99 9.868 7 14a1 1 0 0 0 .4.8l4 3A1 1 0 0 0 13 17l.01-7.134 5.66-6.676a1.99 1.99 0 0 0 .18-2.09Z"/>
            </svg>
            {{ __('app.filters') }}
        </button>
        <div id="overlay" onclick="document.getElementById('filters-wrapper').classList.remove('opened');document.getElementById('overlay').classList.remove('opened');"></div>
        <div class="flex">
            <!-- sidebar -->
            <div class="md:w-96 w-80 pr-5" id="filters-wrapper">
                <x-filters-catalog
                    :manufacturer="$brand"
                    :car-model="$carModel"
                />
            </div>
            <!-- content -->
            <div class="w-full wrapper-content-catalog">
                @if(isset($cars) and $cars->count())
                    <div class="flex flex-col xl:grid sm:grid grid-cols-1 xl:grid-cols-2 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 pagination">
                    {{ $cars->links() }}
                </div>
                @if($content)
                    <div class="prose mt-3">
                        {!! $content !!}
                    </div>
                @endif
                <style>
                    .pagination > .flex div > p.text-sm.text-gray-700.leading-5 {
                        display: none;
                    }
                    /*.pagination > .flex > .flex {*/
                    /*    display: flex !important;*/
                    /*}*/
                    .pagination > .flex > .hidden {
                        display: flex !important;
                    }
                    @media screen and (max-width: 991px) {
                        .pagination > .flex > .hidden {
                            display: none !important;
                        }
                    }
                </style>
            </div>
        </div>
    </div>
@endsection