{{-- Premium Breadcrumb Component --}}
<nav class="premium-breadcrumb" aria-label="Breadcrumb">
    <div class="breadcrumb-container">
        {{-- Home Icon --}}
        <a href="{{ route('filament.admin.pages.dashboard') }}" class="breadcrumb-home">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
        </a>

        {{-- Breadcrumb Items --}}
        @foreach($breadcrumbs as $breadcrumb)
            <span class="breadcrumb-separator">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </span>

            @if($loop->last)
                <span class="breadcrumb-current">
                    @if(isset($breadcrumb['icon']))
                        <x-dynamic-component :component="$breadcrumb['icon']" class="breadcrumb-icon" />
                    @endif
                    {{ $breadcrumb['label'] }}
                </span>
            @else
                <a href="{{ $breadcrumb['url'] }}" class="breadcrumb-link">
                    @if(isset($breadcrumb['icon']))
                        <x-dynamic-component :component="$breadcrumb['icon']" class="breadcrumb-icon" />
                    @endif
                    {{ $breadcrumb['label'] }}
                </a>
            @endif
        @endforeach
    </div>

    {{-- Page Actions Slot --}}
    @if(isset($actions))
        <div class="breadcrumb-actions">
            {{ $actions }}
        </div>
    @endif
</nav>

<style>
.premium-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.875rem 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.dark .premium-breadcrumb {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.breadcrumb-home:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #3b82f6;
}

.breadcrumb-home svg {
    width: 1.125rem;
    height: 1.125rem;
}

.breadcrumb-separator {
    display: flex;
    align-items: center;
    color: #cbd5e1;
}

.breadcrumb-separator svg {
    width: 1rem;
    height: 1rem;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
}

.breadcrumb-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.breadcrumb-current {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.dark .breadcrumb-current {
    color: #f1f5f9;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.breadcrumb-icon {
    width: 1rem;
    height: 1rem;
}

.breadcrumb-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
</style>