@props(['heading' => '', 'description' => '', 'icon' => '', 'subnav' => [
[
'label' => 'Create',
'icon' => 'square-plus',
'route' => route('dashboard'),
'active' => true,
'visible' => false,
]
],

'footer' => ''])

<header class="flex flex-row items-center justify-start gap-2 my-4">


    <div class="flex justify-start w-4/12 p-1 {{-- border-l-4 border-green-600 --}} ">
        <div class="flex items-center justify-start border-l-4 rounded-sm border-emerald-600">

            @if(isset($icon))
            <div class="" {{$attributes}}>
                {{$icon}}
            </div>
            @endif

        </div>

        <div class="flex flex-col justify-center px-2">
            @if(isset($heading))
            <h1 class="text-3xl font-semibold tracking-tight text-gray-800 uppercase ms-2 dark:text-gray-200">
                {{$heading}}
            </h1>
            @endif
            @if(isset($description))
            <h5 class="text-sm font-medium tracking-tight text-gray-600 ms-2 dark:text-gray-400">
                {{$description}}
            </h5>
            @endif
        </div>

    </div>



    <div class="flex justify-end w-8/12">

        <div class="flex items-center justify-end w-full gap-2 p-1 rounded-sm">

            @foreach ( $subnav as $index => $snav )

            <div class="{{$snav['visible'] ? 'flex' : 'hidden' }}">

                <a href="{{$snav['route']}}" wire:navigate>
                    <div
                        class="flex items-center justify-center px-6 py-1 font-mono font-semibold uppercase rounded-sm bg-emerald-600">

                        @switch($snav['icon'])

                        @case('square-plus')
                        <x-fas-square-plus class="w-6 h-6 mr-2 text-gray-800" />
                        @break

                        @case('circle-plus')
                        <x-fas-circle-plus class="w-6 h-6 mr-2 text-gray-800" />
                        @break

                        @case('folder-plus')
                        <x-fas-folder-plus class="w-6 h-6 mr-2 text-gray-800" />
                        @break

                        @default
                        <x-fas-link class="w-6 h-6 mr-2 text-gray-800" />

                        @endswitch

                        <div class="text-gray-800">
                            {{$snav['label']}}
                        </div>

                    </div>
                </a>
            </div>
            @endforeach

        </div>
    </div>
</header>