96 lines
5.1 KiB
PHP
96 lines
5.1 KiB
PHP
<div>
|
|
@if ($call !== null)
|
|
|
|
<div class="relative flex flex-col justify-end overflow-hidden bg-theme-background my-9">
|
|
<a class="relative flex cursor-pointer flex-col justify-end overflow-hidden bg-{{ $call['tag_color'] ?? 'gray' }}-400"
|
|
href="{{ route('call.show', ['id' => $call['id']]) }}">
|
|
|
|
<!-- Tag color background + overlay -->
|
|
<div class="absolute inset-0 z-0 bg-{{ $call['tag_color'] ?? 'gray' }}-400"></div>
|
|
<div class="absolute inset-0 z-10 bg-black/50"></div>
|
|
|
|
<!-- Card content -->
|
|
<div class="relative z-20 flex h-full flex-col justify-between px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-20 text-white">
|
|
<div class="space-y-3">
|
|
|
|
{{-- Deepest tag category badge only --}}
|
|
@php $deepestCat = !empty($call['tag_categories']) ? last($call['tag_categories']) : null; @endphp
|
|
@if ($deepestCat)
|
|
<div class="flex flex-wrap items-center gap-2 pr-16 md:pr-20">
|
|
<span class="bg-{{ $deepestCat['color'] ?? 'gray' }}-400 inline-flex items-center rounded-md px-2 py-1 text-sm font-normal text-black">
|
|
{{ $deepestCat['name'] }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Title --}}
|
|
<h2 class="text text-3xl lg:text-4xl font-semibold leading-tight pr-16 md:pr-20 line-clamp-2">
|
|
{{ $call['title'] }}
|
|
</h2>
|
|
|
|
{{-- Location + expiry badges --}}
|
|
@if (!empty($call['location']) || !empty($call['expiry_badge_text']))
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
@if (!empty($call['location']))
|
|
<h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm lg:text-base font-normal uppercase text-white">
|
|
{{ $call['location'] }}
|
|
</h4>
|
|
@endif
|
|
@if (!empty($call['expiry_badge_text']))
|
|
<h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm lg:text-base font-normal uppercase text-white">
|
|
{{ $call['expiry_badge_text'] }}
|
|
</h4>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Excerpt --}}
|
|
@if (!empty($call['excerpt']))
|
|
<div class="mx-6 my-4 flex items-center justify-center">
|
|
<p class="w-full text-base md:text-xl font-normal leading-relaxed line-clamp-2">
|
|
{{ $call['excerpt'] }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Callable avatar + name + location --}}
|
|
@if (!empty($call['callable_name']))
|
|
<div class="flex flex-wrap items-end gap-4 mt-4">
|
|
<div class="flex items-center gap-3">
|
|
@if (!empty($call['photo']))
|
|
<div class="h-16 w-16 flex-shrink-0 rounded-full outline outline-1 outline-offset-1 outline-white/50 overflow-hidden">
|
|
<img src="{{ $call['photo'] }}"
|
|
alt="{{ $call['callable_name'] }}"
|
|
class="h-full w-full object-cover" />
|
|
</div>
|
|
@endif
|
|
<div class="flex flex-col gap-1 text-sm">
|
|
<span class="font-medium">{{ $call['callable_name'] }}</span>
|
|
@if (!empty($call['callable_location']))
|
|
<span class="text-white/80">{{ $call['callable_location'] }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Like button positioned absolutely outside anchor tag -->
|
|
<div class="absolute top-14 right-4 md:right-10 lg:right-14 z-30">
|
|
@livewire('reaction-button', [
|
|
'typeName' => 'like',
|
|
'showCounter' => true,
|
|
'reactionCounter' => $call['like_count'],
|
|
'modelClass' => $call['model'],
|
|
'modelId' => $call['id'],
|
|
'size' => 'w-10 h-10',
|
|
'inverseColors' => true,
|
|
], key('like-call-main-' . $call['id']))
|
|
</div>
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|