1<div id="livewire-collection">
 2    <div>
 3        <div class="grid grid-cols-12 gap-4 md:gap-8 xl:gap-12">
 4            <!-- Filters Sidebar -->
 5            <div class="col-span-12 xl:col-span-3">
 6                <div class="p-4 xl:p-0">
 7                    <div class="mb-8">
 8                        <div class="mb-2 font-bold">
 9                            Search by name
10                        </div>
11                        {{ livewire:lf-text-filter
12                            blueprint="cars.car"
13                            field="title"
14                            condition="contains"
15                            placeholder="Search cars..."
16                        }}
17                    </div>
18                    <div class="mb-8">
19                        <div class="mb-2 font-bold">
20                            Car brand
21                        </div>
22                        {{ livewire:lf-checkbox-filter
23                            blueprint="cars.car"
24                            field="car_brand"
25                            condition="taxonomy"
26                        }}
27                    </div>
28                    <div class="mb-8">
29                        <div class="mb-2 font-bold">
30                            Transmission
31                        </div>
32                        {{ livewire:lf-radio-filter
33                            blueprint="cars.car"
34                            field="transmission"
35                            condition="is"
36                        }}
37                    </div>
38                    <div class="mb-8">
39                        <div class="mb-2 font-bold">
40                            Fuel type
41                        </div>
42                        {{ livewire:lf-select-filter
43                            blueprint="cars.car"
44                            field="fuel_type"
45                            condition="is"
46                        }}
47                    </div>
48                </div>
49            </div>
50            <div class="col-span-12 xl:col-span-9">
51                <div class="mb-4">
52                    {{ livewire:lf-tags blueprint="cars.car" fields="title|car_brand|transmission|fuel_type" }}
53                </div>
54                <div class="@container">
55                    {{ livewire-collection:cars
56                        paginate="6"
57                        infinite_scroll="true"
58                        view="infinite-scroll"
59                    }}
60                </div>
61            </div>
62        </div>
63    </div>
64</div>