@props(['paths' => [], 'homeRoute' => 'home', 'homeIcon' => 'fas fa-home'])

<nav aria-label="breadcrumb">
    <ol {{ $attributes->merge(['class' => 'breadcrumb float-sm-right bg-white p-2 px-3 shadow-sm rounded-pill m-0', 'style' => 'font-size: 0.9rem;']) }}>

        {{-- Home --}}
        <li class="breadcrumb-item">
            <a href="{{ route($homeRoute) }}" class="text-secondary" title="Inicio">
                <i class="{{ $homeIcon }}"></i>
            </a>
        </li>

        {{-- Path items --}}
        @foreach($paths as $label => $link)
            @if(!$loop->last)
                <li class="breadcrumb-item">
                    <a href="{{ $link }}" class="text-primary font-weight-bold transition-text" style="text-decoration: none;">
                        {{ $label }}
                    </a>
                </li>
            @else
                <li class="breadcrumb-item active text-muted font-weight-bold" aria-current="page">
                    {{ $label }}
                </li>
            @endif
        @endforeach
    </ol>
</nav>

@pushonce('css')
<style>
    .breadcrumb-item+.breadcrumb-item::before {
        content: "›";
        color: #adb5bd;
        font-size: 1.2em;
        line-height: 1;
        vertical-align: middle;
    }

    .transition-text {
        transition: color 0.2s;
    }

    .transition-text:hover {
        color: #0056b3 !important;
        text-decoration: underline !important;
    }
</style>
@endpushonce