@php $currentDay = null; @endphp
<div class="activity-timeline" id="activity-timeline">
    @forelse($items as $item)

        @php
            $day = $item->date->format('Y-m-d');
            $dayLabel = $item->date->isToday() ? 'Today'
                      : ($item->date->isYesterday() ? 'Yesterday'
                      : $item->date->format('M d, Y'));
        @endphp

        @if($day !== $currentDay)
            @php $currentDay = $day; @endphp
            <div class="activity-day-sep">
                <span class="activity-day-label">{{ $dayLabel }}</span>
                <div class="activity-day-line"></div>
            </div>
        @endif

        <div class="activity-tl-item" data-type="{{ $item->type }}">

            <div class="activity-tl-left">
                <div class="activity-tl-dot activity-tl-dot--{{ $item->type }}">
                        @if($item->type === 'entry')
                            <i data-lucide="database" size="14"></i>
                        @elseif($item->type === 'news')
                            <i data-lucide="newspaper" size="14"></i>
                        @elseif($item->type === 'message')
                            <i data-lucide="message-square" size="14"></i>
                        @elseif($item->type === 'thread')
                            <i data-lucide="messages-square" size="14"></i>
                        @elseif($item->type === 'club')
                            <i data-lucide="balloon" size="14"></i>
                        @elseif($item->type === 'review')
                            <i data-lucide="star" size="14"></i>
                        @else
                            <i data-lucide="target" size="14"></i>
                        @endif
                </div>
                <div class="activity-tl-line"></div>
            </div>

            <a
                href="{{ $item->url }}"
                class="activity-tl-card"
            >
                @if( !empty($item->image) )
                    <div class="activity-tl-thumb activity-tl-thumb--{{ $item->type }}">
                        <img src="{{ $item->image }}" alt="{{ $item->title }}" loading="lazy">
                    </div>
                @endif

                <div class="activity-tl-body">
                    <span class="activity-tl-badge activity-tl-badge--{{ $item->type }}">
                        {{ $item->badge }}
                    </span>
                    <div class="activity-tl-card-title">{{ $item->title }}</div>
                    @if(!empty($item->excerpt))
                        <div class="activity-tl-card-description">
                            {{ $item->excerpt }}
                        </div>
                    @endif
                    <div class="activity-tl-meta">
                        @if(!empty($item->user_id))
                            <span>
                                <i data-lucide="user" size="11"></i>
                                <x-xf-username-link :user-id="$item->user_id"/>
                            </span>
                        @elseif(!empty($item->author))
                            <span>
                                <i data-lucide="users" size="11"></i>
                                {{ $item->author }}
                            </span>
                        @endif
                        @if(!empty($item->meta))
                            <span>
                                <i data-lucide="monitor" size="11"></i>
                                {{ $item->meta }}
                            </span>
                        @endif
                    </div>
                </div>

                <div class="activity-tl-time">
                    @if($item->date->isToday())
                        {{ $item->date->format('g:i A') }}
                    @elseif($item->date->isYesterday())
                        Yesterday {{ $item->date->format('g:i A') }}
                    @elseif($item->date->diffInDays() < 7)
                        {{ $item->date->format('D g:i A') }}
                    @else
                        {{ $item->date->format('M j, g:i A') }}
                    @endif
                </div>
            </a>

        </div>

    @empty
        <div class="activity-tl-empty">
            <i data-lucide="inbox" size="36"></i>
            <p>No recent activity.</p>
        </div>
    @endforelse
</div>