@props([
    'title' => null,
    'titleUser' => null,
    'breadcrumbs' => [],
])

<div class="mdl-page">
    <div class="mdl-wrap">
        @if(count($breadcrumbs))
            <nav class="mdl-breadcrumb" aria-label="Miga de pan">
                @foreach($breadcrumbs as $i => $crumb)
                    @if($i > 0)
                        <span class="mdl-breadcrumb-sep">›</span>
                    @endif
                    @if(!empty($crumb['url']))
                        <a href="{{ $crumb['url'] }}">{{ $crumb['label'] }}</a>
                    @else
                        <span>{{ $crumb['label'] }}</span>
                    @endif
                @endforeach
            </nav>
        @endif

        @if($title || $titleUser || isset($actions))
            <div class="mdl-page-heading">
                <div class="min-w-0">
                    @if($titleUser)
                        <div class="flex items-center gap-2.5 min-w-0">
                            <x-avatar :user="$titleUser" size="md" class="shrink-0" />
                            <div class="min-w-0">
                                <h1 class="mdl-page-title">{{ $title ?? ($titleUser->nombreCompleto() ?? $titleUser->name) }}</h1>
                            </div>
                        </div>
                    @elseif($title)
                        <h1 class="mdl-page-title">{{ $title }}</h1>
                    @endif
                    @if(isset($subtitle))
                        <div class="mdl-page-subtitle">{{ $subtitle }}</div>
                    @endif
                </div>
                @if(isset($actions))
                    <div class="mdl-page-actions">
                        {{ $actions }}
                    </div>
                @endif
            </div>
        @endif

        {{ $slot }}
    </div>
</div>