@props([
    'release',
])

@php
    $categoryTranslation = $release->category?->translations->firstWhere('locale', 'de')
        ?? $release->category?->translations->first();
    $categoryName = $categoryTranslation?->name;
    $categoryUrl = $categoryTranslation?->slug ? route('kategorie', ['slug' => $categoryTranslation->slug]) : null;
    $companyName = $release->company?->name ?: 'Unternehmensmeldung';
    $teaser = \Illuminate\Support\Str::of(strip_tags((string) $release->text))->squish()->limit(220);
    $image = $release->images->first();
    $imageUrl = $image?->variantUrl('card') ?? $image?->url();
@endphp

<article class="group rounded-2xl border border-black/10 bg-white p-5 transition hover:border-[#cf3628]/30 hover:shadow-sm dark:border-white/10 dark:bg-zinc-950">
    <div class="grid gap-5 sm:grid-cols-[minmax(0,1fr)_11rem]">
        <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">
                @if ($categoryName && $categoryUrl)
                    <a href="{{ $categoryUrl }}" class="rounded-full bg-[#cf3628]/10 px-2.5 py-1 text-[#a92c25] hover:bg-[#cf3628]/15">
                        {{ $categoryName }}
                    </a>
                @elseif ($categoryName)
                    <span class="rounded-full bg-[#cf3628]/10 px-2.5 py-1 text-[#a92c25]">{{ $categoryName }}</span>
                @endif

                @if ($release->published_at)
                    <time datetime="{{ $release->published_at->toDateString() }}">
                        {{ $release->published_at->format('d.m.Y') }}
                    </time>
                @endif
            </div>

            <h3 class="mt-3 text-xl font-semibold leading-tight text-zinc-950 group-hover:text-[#cf3628] dark:text-white">
                <a href="{{ route('release.detail', ['slug' => $release->slug]) }}">
                    {{ $release->title }}
                </a>
            </h3>

            <p class="mt-3 text-sm leading-6 text-zinc-600 dark:text-zinc-300">
                {{ $teaser }}
            </p>

            <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-zinc-500 dark:text-zinc-400">
                <span class="font-medium text-zinc-700 dark:text-zinc-200">{{ $companyName }}</span>
                <span aria-hidden="true">/</span>
                <a href="{{ route('release.detail', ['slug' => $release->slug]) }}" class="font-semibold text-[#cf3628] hover:text-[#a92c25]">
                    Meldung lesen
                </a>
            </div>
        </div>

        @if ($imageUrl)
            <a href="{{ route('release.detail', ['slug' => $release->slug]) }}" class="block overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-900">
                <img src="{{ $imageUrl }}" alt="{{ $image?->title ?: $release->title }}" class="h-36 w-full object-cover transition duration-300 group-hover:scale-105 sm:h-full" loading="lazy">
            </a>
        @endif
    </div>
</article>