{{-- Event Item - Professional Card Design --}}
@php
    $color = 'primary';
    $iconName = 'calendar';
    $isPast = $event->start_at->isPast();
@endphp
<div class="activity-card event-card border-{{ $color }}" wire:key="event-{{ $event->id }}" x-data="{ expanded: false }">
    {{-- Header --}}
    <div class="card-header">
        <div class="card-icon">
            <span class="icon-circle bg-{{ $color }}-dim">
                <x-ui.nicon :name="$iconName" class="text-{{ $color }}"/>
            </span>
        </div>

        <div class="card-content">
            <div class="card-badges">
                <span class="activity-badge bg-{{ $color }}-dim text-{{ $color }}">
                    {{ __('Event') }}
                </span>
                @if($event->type)
                    <span class="activity-badge bg-secondary-dim text-secondary">
                        {{ $event->type->name }}
                    </span>
                @endif
                @if($isPast)
                    <span class="activity-badge bg-muted-dim text-muted">
                        <x-ui.nicon name="check" class="me-1"/>
                        {{ __('Past') }}
                    </span>
                @else
                    <span class="activity-badge bg-success-dim text-success">
                        <x-ui.nicon name="clock" class="me-1"/>
                        {{ __('Upcoming') }}
                    </span>
                @endif
            </div>

            <div class="card-title">
                {{ $event->start_at->isoFormat('dddd D MMMM YYYY') }} {{ __('at') }} {{ $event->start_at->format('H:i') }}
            </div>

            <div class="card-meta">
                @if($event->user)
                    <span class="meta-item">
                        <x-ui.nicon name="user"/>
                        <span>{{ __('Assigned to') }}:</span>
                        <strong>{{ $event->user->fullname }}</strong>
                    </span>
                @endif
                @if($event->creator && $event->creator_id !== $event->user_id)
                    <span class="meta-item">
                        <x-ui.nicon name="user-check"/>
                        <span>{{ __('Created by') }}:</span>
                        <strong>{{ $event->creator->fullname }}</strong>
                    </span>
                @endif
            </div>
        </div>

        <div class="card-time">
            <span class="time-date">{{ $event->start_at->format('d/m/y') }}</span>
            <span class="time-hour">{{ $event->start_at->format('H:i') }}</span>
        </div>
    </div>

    @if($event->description)
    <div class="card-actions">
        <x-ui.button
            color="outline-light"
            size="xs"
            icon="eye"
            x-on:click="expanded = !expanded"
        >
           <span>{{ __('Show details') }}</span>
        </x-ui.button>
        <x-ui.button
            wire:click="$emit('showModal', 'modals.events.event-detail-modal', {{ $event->id }})"
            color="{{ $color }}"
            size="xs"
            icon="external"
            :label="__('View full')"
        />
    </div>

    <div x-show="expanded" x-collapse>
        <div class="card-preview preview-note">
            {{ Str::limit($event->description, 500) }}
        </div>
    </div>
    @else
    <div class="card-actions">
        <x-ui.button
            wire:click="$emit('showModal', 'modals.events.event-detail-modal', {{ $event->id }})"
            color="{{ $color }}"
            size="xs"
            icon="external"
            :label="__('View details')"
        />
    </div>
    @endif
</div>