@use('Illuminate\Support\Str')

<div class="p-5 mb-5 d-block bg-secondary border-radius-default">
    <div class="row">
        <div class="mx-auto mb-3 col-10">

            @forelse($article->categories as $category)
                <x-article.category_card :$category />
            @empty
            @endforelse
            @isset($hn)
                @if ($hn === 'span')
                    <span class="h3 d-block text-bebas">
                        <a href="{{ route('articles.show', $article) }}">{{ ucfirst($article->title) }}</a>
                    </span>
                @endif
            @else
                <h2 class="h3 d-block text-bebas">
                    <a href="{{ route('articles.show', $article) }}">{{ ucfirst($article->title) }}</a>
                </h2>
            @endisset

        </div>

        <div class="mx-auto mb-3 col-10">
            <a href="{{ route('articles.show', $article) }}">
                <img data-src="{{ $article->feature_photo }}" alt="{{ $article->photo_alt_text }}"
                    class="rounded reload-img w-100 d-block">
            </a>
        </div>
        <div class="mx-auto col-10 ">
            <p class="d-block">{!! Str::limit(value: tiptap_converter()->asText($article->sub_title), limit: 150, preserveWords: true) !!}</p>
            <p>
                <span class="float-start">
                    <img data-src="{{ asset('assets/images/logo/logo-circle.svg') }}" alt="mmi" class="reload-img">
                    <div class="@if ($article->tags->count() === 0) pt-1 @endif ps-2 d-inline-block">
                        <small>Publié le {{ $article->created_at->format('d/m/Y') }}</small><br>

                    </div>
                </span>
                <a href="{{ route('articles.show', $article) }}" class="pt-1 float-end text-bebas text-primary h5">Lire
                    l'article <span class="icofont-simple-right"></span></a>
                @forelse ($article->tags as $key => $tag)
                    @if ($key === 0)
                        <br>
                    @endif
                    <span class="text-primary ps-2 d-inline-block cursor-pointer"
                        onclick="window.location='{{ route('articles.tag', ['tag' => $tag->slug]) }}'"><small>{{ $tag->name }}</small></span>
                @empty
                @endforelse
            </p>
        </div>
    </div>
</div>