@props(['id' => null, 'maxWidth' => null, 'closeButton' => false])

<x-jetstream.modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
    <div class="px-6 py-6">
        <div class="flex items-center justify-between">
            <div class="text-xl font-medium">
                {!! $title !!}
            </div>
            @if($closeButton)
                <button type="button" @click="show = false" class="hover:text-theme-secondary transition-colors">
                    <x-icon name="x-mark" class="w-6 h-6" />
                </button>
            @endif
        </div>

        <div class="m-6">
            {!! $content !!}
        </div>

        <div class="flex flex-row justify-end px-6 py-6 text-right">
            {!! $footer !!}
        </div>
    </div>
</x-jetstream.modal>