@props(['id', 'action'])
<x-modal id="{{$id}}" maxWidth='sm'>
    <!-- contents -->
    <main class="p-4 h-16 text-sm">
    データを削除します。よろしいですか？
    </main>
    <!-- footer -->
    <footer class="py-3 px-3 flex gap-3 items-center justify-end border-t ">
        <x-button.modal-cancel  data-micromodal-close/>
        <x-button.modal-delete-action type="button" @click="{{ $action }}; MicroModal.close();" />
    </footer>
</x-modal>