@props(['article'])

@php($card = \App\Support\Cards\ArticleCardPresenter::from($article))

<li>
    <x-site.cards.smart-card variant="article" class="eca-smart-card--article" :overlay-link="false">
        <x-slot:media>
            <a href="{{ $card['url'] }}" class="eca-smart-card__media-link" tabindex="-1" aria-hidden="true">
                <div class="eca-smart-card__media eca-smart-card__media--article site-progressive-media" data-progressive-media>
                    @if ($card['image'])
                        <x-site.responsive-img
                            :path="$article->image"
                            context="card"
                            :alt="$card['title']"
                            class="eca-smart-card__image"
                            loading="lazy"
                            data-progressive-image
                        />
                    @else
                        <span class="eca-smart-card__placeholder"><span aria-hidden="true">🖼</span>&nbsp;{{ __('site.section_blog') }}</span>
                    @endif
                </div>
            </a>
        </x-slot:media>

        @if ($card['featured'])
            <x-slot:badges>
                <span class="eca-smart-card__chip eca-smart-card__chip--glass">{{ __('site.featured') }}</span>
            </x-slot:badges>
        @endif

        <x-slot:eyebrow>
            <div class="eca-smart-card__meta-row eca-smart-card__meta-row--article">
                @if ($card['date_label'])
                    <time datetime="{{ $card['date_iso'] ?? $card['date'] }}">{{ $card['date_label'] }}</time>
                @endif
                <span class="eca-smart-card__meta-sep" aria-hidden="true">·</span>
                <span>{{ __('site.card_reading_time', ['min' => $card['reading_time']]) }}</span>
                @if ($card['category'])
                    <span class="eca-smart-card__meta-sep eca-smart-card__meta-sep--category" aria-hidden="true">·</span>
                    <span @class(['eca-smart-card__category-inline', 'eca-smart-card__category-inline--'.$card['category_slug']])>{{ $card['category'] }}</span>
                @endif
            </div>
        </x-slot:eyebrow>

        <x-slot:body>
            <a href="{{ $card['url'] }}" class="eca-smart-card__title-link">
                <h3 class="eca-smart-card__title eca-smart-card__title--clamp">{{ $card['title'] }}</h3>
            </a>

            @if ($card['ai_summary'])
                <div class="eca-smart-card__ai-box eca-smart-card__ai-box--secondary">
                    <span class="eca-smart-card__ai-label" aria-hidden="true">✨</span>
                    <p class="eca-smart-card__ai-text line-clamp-2">{{ $card['ai_summary'] }}</p>
                </div>
            @endif

            <span class="eca-smart-card__cta-hint" aria-hidden="true">{{ __('site.read_more') }} ←</span>
        </x-slot:body>

        <x-slot:footer>
            <div class="eca-smart-card__stats eca-smart-card__stats--article">
                <span class="eca-smart-card__stat">
                    <x-site.svg-icon name="chat" class="eca-smart-card__stat-icon" />
                    <span class="eca-smart-card__stat-value">{{ \App\Support\EngagementPresenter::formatCount($card['comments']) }}</span>
                    <span class="eca-smart-card__stat-label">{{ __('site.stats_comments') }}</span>
                </span>
                <span class="eca-smart-card__stat">
                    <x-site.svg-icon name="like" class="eca-smart-card__stat-icon" />
                    <span class="eca-smart-card__stat-value">{{ \App\Support\EngagementPresenter::formatCount($card['likes']) }}</span>
                    <span class="eca-smart-card__stat-label">{{ __('site.stats_likes') }}</span>
                </span>
            </div>
        </x-slot:footer>
    </x-site.cards.smart-card>
</li>