@props(['relationTitle'=>null])
{{--｜関連表--}}
<div id="relation" class="box p-2 h-60 hidden">
    <ul class="bg-secondary-200 flex items-center justify-between text-sm">
        <li class="pb-2">
            <span class="pb-1 px-3 bg-white">
                <i class="fa-solid fa-bars opacity-50 mr-1"></i>
                <span id="relation_title">{{$relationTitle}}</span>
            </span>
        </li>
        <li>
            <button type="button" id="relation_close" class="mr-3">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </li>
    </ul>
    {{$slot}}
</div>

{{-- script --}}
<script>    
    window.addEventListener('load', () => {
        // 関連表｜閉じるボタン押下時
        $('#relation_close').addEventListener('click', (e) => {
            Action.toggle($('#relation'), false);
        });
    });
</script>