@extends('layouts.app')

@section('title', 'Placeo — портал объявлений')

@section('content')

    {{-- Корневые разделы --}}
    <section id="sections" class="mb-10 scroll-mt-28">
        <h1 class="mb-[18px] text-2xl font-extrabold">Разделы</h1>
        <div class="grid grid-cols-2 gap-3.5 sm:grid-cols-[repeat(auto-fill,minmax(184px,1fr))]">
            @foreach($rootCategories as $category)
                <x-category-tile :category="$category" />
            @endforeach
        </div>
    </section>

    {{-- Мои объявления (для авторизованных, 3 последних) --}}
    @auth
        @if($myAds->isNotEmpty())
            <section class="mb-10">
                <div class="mb-[18px] flex items-baseline justify-between">
                    <h2 class="text-2xl font-extrabold">Мои объявления</h2>
                    <a href="{{ route('cabinet.ads.index') }}" class="icon-thin inline-flex items-center gap-1 text-[14.5px] font-semibold text-brand-700">
                        Все мои объявления <span class="text-[16px]"><i data-lucide="arrow-right"></i></span>
                    </a>
                </div>
                <div class="grid grid-cols-2 gap-x-[18px] gap-y-[26px] sm:grid-cols-3 lg:grid-cols-6">
                    @foreach($myAds as $ad)
                        <x-ad-card :ad="$ad" />
                    @endforeach
                </div>
            </section>
        @endif
    @endauth

    {{-- Лента рекомендаций --}}
    <section>
        @if($cityHome)
            <p class="mb-2 text-sm text-muted">Объявления города {{ $cityHome->name }} показываются первыми.</p>
        @endif
        <div class="mb-[18px] flex items-baseline justify-between">
            <h2 class="text-2xl font-extrabold">{{ $cityHome ? "Объявления в городе {$cityHome->name}" : (auth()->check() ? 'Рекомендации для вас' : 'Свежие объявления') }}</h2>
            <a href="{{ route('search') }}" class="icon-thin inline-flex items-center gap-1 text-[14.5px] font-semibold text-brand-700">
                Смотреть все <span class="text-[16px]"><i data-lucide="arrow-right"></i></span>
            </a>
        </div>
        @include('partials.feed', ['ads' => $ads, 'view' => $view, 'nextUrl' => $nextUrl])
    </section>

@endsection