@props(['title', 'subtitle' => null, 'breadcrumb' => null, 'action' => null, 'actionLabel' => null, 'actionIcon' => 'add'])

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                    <div class="d-flex justify-content-between align-items-center px-3">
                        <div>
                            <h6 class="text-white text-capitalize ps-3 mb-0">{{ $title }}</h6>
                            @if($subtitle)
                            <p class="text-white opacity-8 ps-3 mb-0">{{ $subtitle }}</p>
                            @endif
                        </div>
                        @if($action && $actionLabel)
                        <div>
                            <a href="{{ $action }}" class="btn btn-sm bg-gradient-success mb-0">
                                <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">{{ $actionIcon }}</i> {{ $actionLabel }}
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @if(isset($slot) && $slot->isNotEmpty())
            <div class="card-body px-0 pb-2">
                {{ $slot }}
            </div>
            @endif
        </div>
    </div>
</div>