{{-- 즐겨찾기 섹션 --}}
@if($bookmarks->isNotEmpty())
    <div class="border-b border-gray-200 pb-2 mb-2">
        <div class="tag-header">
            <span class="flex items-center gap-2">
                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
                즐겨찾기 ({{ $bookmarks->count() }})
            </span>
        </div>
        <div class="space-y-0.5">
            @foreach($bookmarks as $bookmark)
                <div class="endpoint-item" onclick="selectEndpoint('{{ $bookmark->method }}_{{ str_replace('/', '_', $bookmark->endpoint) }}', this)">
                    <span class="method-badge method-{{ strtolower($bookmark->method) }}">
                        {{ $bookmark->method }}
                    </span>
                    <span class="endpoint-path" title="{{ $bookmark->endpoint }}">
                        {{ $bookmark->display_name ?? $bookmark->endpoint }}
                    </span>
                    <button onclick="event.stopPropagation(); toggleBookmark('{{ $bookmark->endpoint }}', '{{ $bookmark->method }}', this)"
                            class="text-yellow-500 hover:text-yellow-600">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    </button>
                </div>
            @endforeach
        </div>
    </div>
@endif

{{-- 태그별 엔드포인트 그룹 --}}
@forelse($endpointsByTag as $tag => $endpoints)
    <div class="tag-group">
        <div class="tag-header" onclick="toggleTagGroup('{{ Str::slug($tag) }}')">
            <span class="flex items-center gap-2">
                <svg class="w-4 h-4 text-gray-400 transition-transform" id="chevron-{{ Str::slug($tag) }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                {{ $tag }}
            </span>
            <span class="text-xs text-gray-400">{{ $endpoints->count() }}</span>
        </div>

        <div id="tag-{{ Str::slug($tag) }}" class="space-y-0.5">
            @foreach($endpoints as $endpoint)
                @php
                    $isBookmarked = $bookmarks->where('endpoint', $endpoint['path'])->where('method', $endpoint['method'])->isNotEmpty();
                @endphp
                <div class="endpoint-item" data-operation-id="{{ $endpoint['operationId'] }}" onclick="selectEndpoint('{{ $endpoint['operationId'] }}', this)">
                    <span class="method-badge method-{{ strtolower($endpoint['method']) }}">
                        {{ $endpoint['method'] }}
                    </span>
                    <span class="endpoint-path" title="{{ $endpoint['summary'] ?: $endpoint['path'] }}">
                        {{ $endpoint['path'] }}
                    </span>
                    <button onclick="event.stopPropagation(); toggleBookmark('{{ $endpoint['path'] }}', '{{ $endpoint['method'] }}', this)"
                            class="{{ $isBookmarked ? 'text-yellow-500' : 'text-gray-400' }} hover:text-yellow-500">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    </button>
                </div>
            @endforeach
        </div>
    </div>
@empty
    <div class="text-center text-gray-400 py-8">
        <svg class="w-8 h-8 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <p class="text-sm">검색 결과가 없습니다</p>
    </div>
@endforelse