@props([
   'breakpoint' => 'sm',
   'cols' => '6',
   'method' => 'POST',
   'action' => '#',
   'buttons' => false,
   'submitButtonText' => 'Submit'
])
<form action="{{ $action }}" method="{{ ($method == 'GET' ? 'GET':'POST') }}">
    <div class="px-4 py-6 sm:p-8">
        <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 {{ $breakpoint }}:grid-cols-{{ $cols }}">
            @csrf
            @if($method != 'POST' AND $method != 'GET')
                @method($method)
            @endif
            {{ $slot }}
        </div>
    </div>
    <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
        @if($buttons)
            {{ $buttons }}
        @else
            <!-- TODO make the cancel button do something -->
            <x-form.button-nocolor type="button">Cancel</x-form.button-nocolor>
            <x-form.button>{{ $submitButtonText }}</x-form.button>
        @endif
        {{ $buttons }}

    </div>
</form>