{{--
    モーダル表示する
    @props id モーダルID
    @props title タイトル
    @props width 最大表示幅
    @props height 最大表示高さ
--}}
@props(['id', 'title', 'width'=>'2xl', 'height'=>'[calc(100vh_-_210px)]'])
<x-modal id="{{$id}}" maxWidth='{{$width}}'>
    <!-- main -->
    <main class="px-2 py-2">
        <div class="modal-container-main h-[calc(100vh_-_210px)] sm:max-h-{{$height}} overflow-auto">
         <!-- Contents -->
         <div class="flex flex-col w-full h-full">
            <main class="flex flex-col flex-[1_0_auto] max-w-full ">
            <div class="border-b border-secondary-500 px-2 pb-1 mb-3">{{$title}}</div>
            <!-- Page Contents -->
            <div class="px-2">{{$slot}}</div>
            </main>
         </div>
        </div>
    </main>
    <!-- footer -->
    <footer class="py-3 px-3 flex gap-3 items-center justify-end border-t ">
        {{--
        <x-button.modal-close class="modal-close" data-micromodal-close/>
        --}}
        <x-button.modal-close class="modal-close" onclick="MicroModal.close('{{$id}}')"/>
    </footer>
</x-modal>