@foreach($notifications as $item)
    @php
        $isUnread = is_null($item->read_at);
        $data = $item->data;
        $itemTitle = $data['title'] ?? '알림 안내';
    @endphp

    <div class="list-group-item list-group-item-action p-3 d-flex align-items-center justify-content-between gap-3 {{ $isUnread ? 'bg-white' : 'bg-light bg-opacity-50' }}"
         id="noti-row-{{ $item->id }}"
         style="transition: background-color 0.15s ease;">
        
        <!-- 좌측: 제목 영역 (클릭 시 상세 보기) -->
        <a href="{{ route('mypage.notifications.show', $item->id) }}" class="text-decoration-none min-w-0 flex-grow-1 d-flex align-items-center gap-2">
            @if($isUnread)
                <span class="badge bg-danger rounded-pill flex-shrink-0" style="font-size: 0.65rem; padding: 0.25em 0.5em;">N</span>
            @endif

            <span class="text-truncate {{ $isUnread ? 'fw-bold text-dark' : 'text-secondary' }}" style="font-size: 0.95rem;">
                {{ $itemTitle }}
            </span>

            @if(!empty($data['url']))
                <i class="fas fa-link text-muted fs-xs flex-shrink-0" title="바로가기 포함"></i>
            @endif
        </a>

        <!-- 우측: 발송일시 및 개별 삭제 버튼 -->
        <div class="d-flex align-items-center gap-3 flex-shrink-0">
            <span class="text-muted small font-monospace">
                {{ $item->created_at->format('m.d H:i') }}
            </span>

            <!-- 삭제 버튼 -->
            <form id="delete-form-{{ $item->id }}" action="{{ route('mypage.notifications.destroy', $item->id) }}" method="POST" class="d-inline">
                @csrf
                @method('DELETE')
                <button type="button" 
                        class="btn btn-link text-muted p-0 text-decoration-none opacity-50 hover-opacity-100" 
                        title="알림 삭제"
                        onclick="confirmDeleteNotification('{{ $item->id }}', '{{ addslashes($itemTitle) }}')">
                    <i class="fas fa-times"></i>
                </button>
            </form>
        </div>
    </div>
@endforeach