@extends("layouts.base")

@section("title", __("supported.title"))

@section("content")
    <div class="row justify-content-center mt-5">
        <div class="col-lg-10">
            <!-- * Titre principal -->
            <h2 class="mb-4">❤️ {{ __("supported.heading") }}</h2>

            @forelse ($likedConfessions as $confession)
                <div class="card mb-3 shadow-sm">
                    <div
                        class="card-header d-flex justify-content-between {{ $confession->category?->getTailwindCategoryClass() ?? "category-default" }} text-white small"
                    >
                        <span>
                            {{ $confession->category->translatedName ?? __("supported.no_category") }}
                        </span>
                        <span>
                            {{ $confession->created_at->format("d M Y") }}
                        </span>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title" style="text-align: justify;">{{ $confession->title }}</h5>
                        <p class="card-text" style="text-align: justify;">
                            {{ Str::words($confession->description, 40) }}
                        </p>
                        <a
                            href="{{ route("confession.show", $confession->id) }}"
                            class="btn btn-sm btn-outline-primary"
                        >
                            {{ __("supported.view") }}
                        </a>
                    </div>
                </div>
            @empty
                <div class="alert alert-info">
                    {{ __("supported.empty") }}
                </div>
            @endforelse

            <!-- * Pagination -->
            <div class="mt-4">
                {{ $likedConfessions->links("pagination::bootstrap-5") }}
            </div>
        </div>
    </div>
@endsection