@props([
    'title'       => '',
    'breadcrumbs' => [
        ['name' => 'Inicio', 'href' => '/', 'active' => true],
    ],
])

<section class="page-header page-header-modern bg-color-grey page-header-md">
    <div class="container">
        <div class="row">
            <div class="col-md-12 align-self-center p-static order-2 text-center">
                <h1 class="text-dark text-uppercase">{!! $title !!}</h1>
            </div>
            <div class="col-md-12 align-self-center order-1">
                <ul class="breadcrumb d-block text-center">
                    @foreach ($breadcrumbs as $breadcrumb)
                        <li>
                            @if (!empty($breadcrumb['route']) && \Illuminate\Support\Facades\Route::has($breadcrumb['route']))
                                <a href="{{ route($breadcrumb['route'], $breadcrumb['params'] ?? []) }}"
                                   @if($breadcrumb['active'] ?? false) class="active" @endif>
                                    {{ $breadcrumb['name'] }}
                                </a>
                            @elseif (!empty($breadcrumb['href']))
                                <a href="{{ $breadcrumb['href'] }}"
                                   @if($breadcrumb['active'] ?? false) class="active" @endif>
                                    {{ $breadcrumb['name'] }}
                                </a>
                            @else
                                <span @if($breadcrumb['active'] ?? false) class="active" @endif>
                                    {{ $breadcrumb['name'] }}
                                </span>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>