@props(['article', 'forSlider' => false])

<div @class([
 'h-[180px] md:h-[210px] rounded w-full shadow-sm relative overflow-hidden transition ease-in-out duration-200',
 'hover:scale-[101%]' => !$forSlider,
 'swiper-slide group' => $forSlider,
]) style="background-color: var(--color-surface)"
@if (!$forSlider)
 onmouseover="slideImage({{ $article->id }})" onmouseleave="unslideImage({{ $article->id }})"
 @endif>
 <a href="{{ route('article.show', $article->slug) }}">
 <div id="article-{{ $article->id }}" style="background: url('/storage/{{ $article->image }}');" class="article-image">
 </div>

 <div class="mt-3 md:mt-4 px-3 md:px-4">
 <p @class([
 'font-semibold text-base md:text-lg truncate',
 'group-hover:text-[var(--color-primary)] transition duration-200' => $forSlider,
 ]) >
 {{ $article->title }}
 </p>

 <div class="flex items-center gap-x-2">
 <div
 class="mt-2 md:mt-3 flex h-8 w-8 md:h-10 md:w-10 items-center justify-center overflow-hidden rounded-full" style="background-color: var(--color-background)">
 <img src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&headonly=1" alt="">
 </div>

 <p class="mt-2 md:mt-4 font-semibold text-sm md:text-base" style="color: var(--color-text-muted)">
 {{ $article->user->username ?? setting('hotel_name') }}
 </p>
 </div>
 </div>
 </a>
</div>

<script>
 function slideImage(articleId) {
 document.getElementById('article-' + articleId).classList.add('article-image-slide');
 }

 function unslideImage(articleId) {
 document.getElementById('article-' + articleId).classList.remove('article-image-slide');
 }
</script>