@props(['news'])

@php($card = \App\Support\Cards\NewsCardPresenter::from($news))

<li class="news-list-card" data-reveal="card" data-reveal-item>
    <a href="{{ $card['url'] }}" class="news-list-card__link" aria-label="{{ $card['title'] }}">
        <div class="news-list-card__media site-progressive-media" data-progressive-media>
            @if ($card['image'])
                <img src="{{ $card['image'] }}" alt="{{ $card['title'] }}" class="news-list-card__image" loading="lazy" decoding="async" data-progressive-image />
            @else
                <span class="news-list-card__placeholder">{{ __('site.nav_news') }}</span>
            @endif
            <span class="news-list-card__media-glow" aria-hidden="true"></span>
        </div>
        <div class="news-list-card__body">
            <div class="news-list-card__meta">
                @if ($card['date'])
                    <time class="news-list-card__date" datetime="{{ $card['datetime'] }}">{{ $card['date'] }}</time>
                @endif
                @if (! empty($card['category']))
                    <span class="news-list-card__category">{{ $card['category'] }}</span>
                @endif
            </div>
            <h2 class="news-list-card__title">{{ $card['title'] }}</h2>
            @if ($card['excerpt'])
                <p class="news-list-card__excerpt">{{ $card['excerpt'] }}</p>
            @endif
            <span class="news-list-card__cta">
                <span>{{ __('site.read_more') }}</span>
                <svg class="news-list-card__cta-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M7.5 4.5 13 10l-5.5 5.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
        </div>
    </a>
</li>