@extends('layouts.app')

@section('content')
<div class="container">@include('partials.breadcrumb', ['current' => 'Mes favoris'])</div>

<section class="section" style="padding-top:0">
    <div class="container">
        <div class="section-head">
            <div>
                <h1>Mes favoris</h1>
                <p>Retrouvez ici les annonces, professionnels et sorties que vous avez sauvegardés.</p>
            </div>
            <a href="{{ url('/annonces') }}" class="btn btn-outline">Parcourir les annonces <x-icon name="arrow-right"/></a>
        </div>

        <div class="panel empty">
            <span class="empty-icon"><x-icon name="heart"/></span>
            <h3>Vos favoris sont enregistrés sur cet appareil</h3>
            <p class="muted" style="max-width:52ch;margin:8px auto 18px">
                Cliquez sur le cœur d'une annonce pour la retrouver ici. Connectez-vous pour synchroniser
                vos favoris entre votre ordinateur et votre téléphone.
            </p>
            <div class="row-center" style="justify-content:center;gap:10px">
                <a href="{{ url('/connexion') }}" class="btn btn-primary">Se connecter</a>
                <a href="{{ url('/inscription') }}" class="btn btn-outline">Créer un compte</a>
            </div>
        </div>

        <div class="section-head" style="margin-top:34px">
            <h2 style="font-size:1.25rem">Suggestions pour vous</h2>
        </div>
        <div class="grid grid-4">
            @foreach($suggestions as $ad)<x-ad-card :ad="$ad"/>@endforeach
        </div>
    </div>
</section>
@endsection