@props([
    'with_title_area' => false,
    'title_block_right' => false,
    'title' => false,
    'subtitle' => false,
    'sortable' => true
])
@php
    if ($title) $with_title_area = true;
@endphp

<div>
    @if($with_title_area)
        <div class="mb-2 mt-4 sm:px 4 sm:flex sm:items-center">
            <div class="sm:flex-auto sm:items-center">
                @if($title)<h1 {{ $title->attributes->merge(['class' => 'text-base font-semibold leading-6 text-gray-900']) }}>{{ $title }}</h1>@endif
                @if($subtitle)<p {{ $subtitle->attributes->merge(['class' => 'mt-2 text-sm text-gray-700']) }}>{{ $subtitle }}</p>@endif
            </div>
{{--            Title block right often used for add button--}}
            @if($title_block_right)
                <div {{ $title_block_right->attributes->merge(['class' => 'mt-4 sm:ml-16 sm:mt-0 sm:flex-none']) }}>
                    {{ $title_block_right }}
                </div>
            @endif
        </div>
    @endif
    <div class="flow-root">
        <div class="-mx-4 -my-2  sm:-mx-6 lg:-mx-8 overflow-x-auto">
            <div class='inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8' @if($sortable)x-data="data()"@endif>
                <table {{ $attributes->merge(['class' => 'min-w-full divide-y divide-gray-300']) }}>
                    {{ $slot }}
                </table>
            </div>
        </div>
    </div>
</div>