@extends('layouts.main')

@section('content')
    <div class="container mx-auto px-5 xl:px-0">
        <h2 class="text-4xl font-bold dark:text-white mb-5">{{ __('app.new_cars') }}</h2>
        <div class="flex flex-col xl:grid sm:grid grid-cols-1 xl:grid-cols-3 sm:grid-cols-2 grid-rows-4 xl:gap-7 sm:gap-5">
            @foreach($new_cars as $new_car)
                <x-car-card :car="$new_car" />
            @endforeach
        </div>
        @if($brands and $brands->count())
            <h2 class="text-4xl font-bold dark:text-white mb-5 mt-5">{{ __('app.popular_brands') }}</h2>
            <div class="grid sm:grid-cols-5 grid-cols-3 grid-rows-1 gap-7">
                @foreach($brands as $brand)
                    <a href="{{ $brand->href }}" title="{{ $brand->name }}" class="flex items-center max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
                        <img class="w-full" src="{{ $brand->image }}" alt="{{ $brand->name }}" loading="lazy" />
                    </a>
                @endforeach
            </div>
        @endif
    </div>
@endsection