@props(['data'=>null, 'pager'=>true])
<div {{ $attributes->merge(['class' => "bg-white border border-secondary-200 text-secondary-900 overflow-hidden shadow-xs rounded-lg p-3 "]) }}>
    <!-- No Data -->
    @if(is_null($data) || $data->isEmpty())
        <x-list.nodata />
        @isset($nodata)
            <hr class="my-2">
            {{$nodata}}
        @endisset

    <!-- Listing -->
    @else
    <div>
        @isset($header)
            {{$header}}
        @endisset
        <!-- Pager -->
        @if($pager)
        <div class="flex items-center justify-between ">
            <x-list.paging :data="$data" />
            <div class="flex-1 flex items-center justify-between gap-5 mx-3">
                @isset($actionLeft)
                    <div class="border-l-2 pl-3 flex items-center gap-1.5">
                    {{$actionLeft}}
                    </div>
                @endisset
                @isset($actionRight)
                    @if(!isset($actionLeft)) <div></div>@endif
                    <div class="flex items-end gap-2">
                    {{$actionRight}}
                    </div>
                @endisset
            </div>
            <x-list.pager :data="$data" />
        </div>
        @else
            @isset($actions)
                {{$actions}}
            @endisset
        @endif
        <!-- Table -->
        @php($mt = $pager? 'mt-3': '')
        <div @resize.window="fixed()" @search-open.window="fix()">
            <!-- スティッキー横スクロールバー（上部） -->
            <div x-ref="scrollbarTop"
                class="{{$mt}} overflow-x-auto overflow-y-hidden thin-scroll sticky top-0 z-20 bg-transparent"
                :class="sidebar ? 'w-full md:w-[calc(100vw-18.7rem)]' : 'w-full md:w-[calc(100vw-4rem)]'"
                @scroll="syncScroll('top')"
                style="height: 12px;">
                <div x-ref="scrollbarTopInner" style="height: 1px;"></div>
            </div>
            <div x-ref="wrap"
                class="scroll-wrap min-w-base thin-scroll !py-0 !my-0"
                :class="sidebar ? 'w-full md:w-[calc(100vw-18.7rem)]' : 'w-full md:w-[calc(100vw-4rem)]'"
                @scroll="syncScroll('main')" >
                <div>
                    {{$slot}}
                </div>
            </div>
        </div>
        <!-- Pager #C2 -->
        @if($pager)
        <div x-ref="underPager" class="flex items-center justify-end mt-2">
            <x-list.pager :data="$data" :first="false" />
        </div>
        @endif
    </div>
    @endif
</div>