@props([
    "confession",
    "is_owner",
])

<div
    class="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
>
    {{-- En-tête de la carte --}}
    <div
        class="px-6 py-4 relative text-white {{ $confession->category?->getTailwindHeaderClass() ?? "category-default-header" }}"
    >
        <div class="flex justify-between items-center text-sm">
            <div class="flex items-center">
                <span
                    class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $confession->category?->getTailwindCategoryClass() ?? "category-default" }} shadow"
                >
                    {{ $confession->category->translatedName ?? __("dashboard.no_category") }}
                </span>
            </div>
            <div class="flex items-center text-xs opacity-80">
                <svg
                    class="w-4 h-4 mr-1"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                >
                    <path
                        fill-rule="evenodd"
                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                        clip-rule="evenodd"
                    />
                </svg>
                <span>{{ $confession->created_at->format("d M Y") }}</span>
            </div>
        </div>
    </div>

    {{-- Corps de la carte --}}
    <div class="p-6">
        <h3 class="text-xl font-bold text-gray-800 mb-3 break-words">
            {{ $confession->title }}
        </h3>
        <p class="text-gray-600 mb-6 leading-relaxed" style="text-align: justify;">
            {{ Str::words($confession->description, 60) }}
        </p>

        <div class="flex flex-wrap gap-3">
            <a
                href="{{ route("confession.show", $confession->id) }}"
                class="btn-icon-link"
            >
                <svg
                    class="w-4 h-4 mr-2"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                </svg>
                <span>{{ __("dashboard.view") }}</span>
            </a>

            @if ($is_owner)
                <a
                    href="{{ route("confession.edit", $confession->id) }}"
                    class="btn-icon-link text-amber-600 hover:text-amber-700"
                >
                    <svg
                        class="w-4 h-4 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                        />
                    </svg>
                    <span>{{ __("dashboard.edit") }}</span>
                </a>
                <form
                    action="{{ route("confession.delete", $confession->id) }}"
                    method="POST"
                    class="inline"
                    onsubmit="return confirm('{{ __("dashboard.confirm_delete") }}')"
                >
                    @csrf
                    @method("DELETE")
                    <button
                        type="submit"
                        class="btn-icon-link text-red-600 hover:text-red-700"
                    >
                        <svg
                            class="w-4 h-4 mr-2"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                            />
                        </svg>
                        <span>{{ __("dashboard.delete") }}</span>
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>