@props(['submit', 'icon' => null])

<div {{ $attributes->merge(['class' => 'border-2 border-gray-700 rounded-md']) }}>

    <div class="rounded-b-md">



        {{--
        @if (isset($header))
        <div class="flex items-center justify-between bg-gray-100 rounded-t-md dark:bg-gray-900">
            <div class="flex items-center w-8/12 ">
                @if(isset($icon))
                <div class="">
                    {{$icon}}
                </div>
                @endif
                <div class="ms-4">
                    @if(isset($title))
                    <div class="text-lg font-semibold text-gray-700 uppercase dark:text-gray-300">
                        {{ $title }}
                    </div>
                    @endif
                    @if(isset($description))
                    <div class="text-xs text-gray-600 dark:text-gray-400">
                        {{ $description }}
                    </div>
                    @endif
                </div>
            </div>
            <div class="flex items-center justify-end w-4/12">
                @if(isset($head_actions))
                <div class="">
                    {{ $head_actions }}
                </div>
                @endif
            </div>
        </div>
        @endif
        --}}

        {{--
        @if(isset($header))
        <div class="flex items-center justify-between p-1 bg-gray-300 rounded-t-md dark:bg-gray-900">
            <div class="flex justify-between gap-x-4">
                <div class="">
                    @if(isset($icon))
                    <div class="">
                        {{$icon}}
                    </div>
                    @endif
                </div>
                <div class="">
                    @if(isset($title))
                    <div class="text-lg font-semibold text-gray-500 uppercase dark:text-gray-300">
                        {{$title}}
                    </div>
                    @endif
                    @if(isset($description))
                    <div class="text-sm font-semibold text-gray-700 uppercase dark:text-gray-700">
                        {{ $description }}
                    </div>
                    @endif
                </div>
                <div class="">
                    @if(isset($head_actions))
                    <div class="">
                        {{$head_actions}}
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif
        --}}






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







        @if(isset($header))
        <div
            class="flex items-center justify-between p-1 {{-- bg-gray-300 --}} rounded-b-md {{-- dark:bg-gray-900 --}} ">

            <div class="flex items-center">
                @if(isset($icon))
                <div class="p-2">
                    {{$icon}}
                </div>
                @endif
                @if(isset($title))
                <div class="text-lg font-semibold text-gray-700 uppercase dark:text-gray-300">
                    {{$title}}
                </div>
                @endif

                {{-- @if(isset($description))
                <div class="text-sm font-semibold text-gray-500 uppercase dark:text-gray-500">
                    {{$description}}
                </div>
                @endif --}}



            </div>

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


        </div>
        @endif







        <form wire:submit="{{ $submit }}" class="">
            <div class="h-2 {{-- bg-gray-300 dark:bg-gray-700 --}}"></div>
            <div class="p-0 {{-- bg-gray-700 dark:bg-gray-800 --}} md:p-1">
                {{ $form }}
            </div>



            {{-- <form wire:submit="{{ $submit }}" class=""> --}}
                {{-- <div class="">
                    <div class="h-2 bg-gray-200 dark:bg-gray-950"></div>
                    <div class="p-0 bg-gray-700 dark:bg-gray-950 md:p-1">
                        {{ $form }}
                    </div>
                </div> --}}




                @if(isset($footer))
                <div
                    class="flex items-center justify-between p-1 {{-- bg-gray-300 --}} rounded-b-md {{-- dark:bg-gray-900  --}}">
                    <div class="">
                        @if(isset($foot_actions))
                        {{$foot_actions}}
                        @endif
                    </div>

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

                </div>
                @endif

            </form>

    </div>
</div>



{{-- <div {{ $attributes->merge(['class' => 'flex w-full items-center justify-between']) }}>
    <div class="w-full rounded-md">
        @if (isset($header))
        <div class="flex items-center justify-between w-full py-2 bg-gray-600 rounded-t-md dark:bg-gray-900">
            <div class="flex items-center w-8/12 ">
                @if(isset($icon))
                <div class="">
                    {{ $icon }}
                </div>
                @endif
                @if(isset($title))
                <div class="text-2xl font-semibold text-gray-400 uppercase dark:text-gray-400">
                    {{ $title }}
                </div>
                @endif

                @if(isset($description))
                <div class="text-xs text-gray-800 ">
                    {{ $description }}
                </div>
                @endif

            </div>
            <div class="flex items-center justify-end w-4/12">
                @if(isset($head_actions))
                <div class="p-1 me-2">
                    {{ $head_actions }}
                </div>
                @endif
            </div>
        </div>
        @endif

        <form wire:submit="{{ $submit }}" class="">
            <div class="flex items-center justify-start p-1 bg-gray-400 dark:bg-gray-800">
                {{ $form }}
            </div>
            @if(isset($footer))
            <div class="flex items-center justify-start p-4 bg-gray-300 rounded-b-lg dark:bg-gray-900 ">
                @if(isset($foot_actions))
                <div class="">
                    {{$foot_actions}}
                </div>
                @endif
                @if(isset($messages))
                <div class="">
                    {{$messages}}
                </div>
                @endif
            </div>
            @endif
        </form>
    </div>
</div>
--}}

{{-- <div class="">
    <div class="hidden">visibles</div>
    @if (isset($visibles))
    @foreach ( $visibles as $visible )
    <div class="">
        <h4>{{__($visible)}}</h4>
    </div>
    @endforeach
    @endif
</div> --}}