@props(['service'])

@php
    $card = \App\Support\Cards\ServiceCardPresenter::from($service);
@endphp

<li>
    <x-site.cards.smart-card variant="service" class="eca-smart-card--service">
        <x-slot:body>
            <header class="eca-smart-card__service-header">
              
                <div class="min-w-0 flex-1">
                    <h3 class="eca-smart-card__title text-start"><a href="{{ $card['url'] }}">{{ $card['name'] }}</a></h3>
                    <p class="eca-smart-card__tracking">{{ __('site.card_tracking') }}: {{ $card['tracking_code'] }}</p>
                </div>
                <div class="eca-smart-card__service-thumb">
                    @if ($card['image'])
                        <img src="{{ $card['image'] }}" alt="{{ $card['name'] }}" class="h-20 w-20 rounded-3xl object-cover ring-4 ring-cyan-500/30" loading="lazy" />
                    @else
                        <div class="flex h-20 w-20 items-center justify-center rounded-3xl bg-slate-800 ring-4 ring-cyan-500/30" aria-hidden="true">⚙</div>
                    @endif
                    <span class="eca-smart-card__service-status mx-2">{{ $card['status_label'] }}</span>
                </div>
            </header>
        </x-slot:body>

        <x-slot:footer>
            <div class="eca-smart-card__content-zone">
                <x-site.service-showcase :card="$card" variant="card" />
            </div>
        </x-slot:footer>
    </x-site.cards.smart-card>
</li>