{{--
    =========================================================
    COMPOSANT CARTE DE CONFESSION - Réutilisable
    =========================================================
--}}

@props([
    "confession",
    "showActions" => true,
    "viewOnly" => false,
])

<div class="dashboard-confession-card">
    {{-- En-tête avec métadonnées et couleur de catégorie --}}
    <div
        class="dashboard-confession-header {{ $confession->category?->getTailwindHeaderClass() ?? "category-default-header" }} text-white"
    >
        <div class="flex justify-between items-center text-sm">
            <div class="flex items-center">
                {{-- Icône tag pour identifier la catégorie --}}
                <svg
                    class="w-4 h-4 mr-2"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    aria-hidden="true"
                >
                    <path
                        fill-rule="evenodd"
                        d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z"
                        clip-rule="evenodd"
                    />
                </svg>
                {{-- Nom de la catégorie traduit --}}
                <span aria-label="{{ __("dashboard.category") }}">
                    {{ $confession->category->translatedName ?? __("dashboard.no_category") }}
                </span>
            </div>
            <div class="flex items-center">
                {{-- Icône calendrier pour la date --}}
                <svg
                    class="w-4 h-4 mr-2"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    aria-hidden="true"
                >
                    <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>
                {{-- Date de création formatée avec locale --}}
                <time
                    datetime="{{ $confession->created_at->toISOString() }}"
                    aria-label="{{ __("dashboard.created_at") }}"
                >
                    {{ $confession->created_at->translatedFormat("d M Y") }}
                </time>
            </div>
        </div>
    </div>

    {{-- Contenu principal --}}
    <div class="p-6">
        {{-- Titre de la confession --}}
        <h3 class="text-xl font-semibold text-slate-800 mb-4 break-words">
            {{ $confession->title }}
        </h3>

        {{-- Description tronquée --}}
        <p class="text-slate-600 leading-relaxed mb-6 break-words" style="text-align: justify;">
            {{ Str::words($confession->description, 45) }}
        </p>

        {{-- Actions conditionnelles --}}
        @if ($showActions)
            <div
                class="flex flex-wrap gap-3"
                role="group"
                aria-label="{{ __("dashboard.confession_actions") }}"
            >
                {{-- Bouton de visualisation --}}
                <a
                    href="{{ route("confession.show", $confession->id) }}"
                    class="dashboard-btn-small bg-blue-500 hover:bg-blue-600 text-white inline-flex items-center"
                    aria-label="{{ __("dashboard.view_confession", ["title" => $confession->title]) }}"
                >
                    <svg
                        class="w-4 h-4 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                        />
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M2.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>
                    {{ __("dashboard.view") }}
                </a>

                @unless ($viewOnly)
                    {{-- Bouton d'édition --}}
                    <a
                        href="{{ route("confession.edit", $confession->id) }}"
                        class="dashboard-btn-small bg-amber-500 hover:bg-amber-600 text-white inline-flex items-center"
                        aria-label="{{ __("dashboard.edit_confession", ["title" => $confession->title]) }}"
                    >
                        <svg
                            class="w-4 h-4 mr-2"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <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>
                        {{ __("dashboard.edit") }}
                    </a>

                    {{-- Formulaire de suppression --}}
                    <form
                        action="{{ route("confession.delete", $confession->id) }}"
                        method="POST"
                        class="inline"
                        onsubmit="return confirm('{{ __("dashboard.confirm_delete") }}')"
                    >
                        @csrf
                        @method("DELETE")
                        <button
                            type="submit"
                            class="dashboard-btn-small bg-red-500 hover:bg-red-600 text-white inline-flex items-center"
                            aria-label="{{ __("dashboard.delete_confession", ["title" => $confession->title]) }}"
                        >
                            <svg
                                class="w-4 h-4 mr-2"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                aria-hidden="true"
                            >
                                <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>
                            {{ __("dashboard.delete") }}
                        </button>
                    </form>
                @endunless
            </div>
        @endif
    </div>
</div>

{{--
    =========================================================
    FIN COMPOSANT CARTE DE CONFESSION
    =========================================================
--}}