@php
    if ($hideLength ?? false) {
        $class = 'hide-length';

        if (!($displaySearch ?? false) && !($toggleColumns ?? false)) {
            $class .= ' hide-row';
        }
    }
@endphp

<div class="data-table-top-container">
    @if($displaySearch ?? false)
        @include('data_table.components.tables.shared.search', [
            'placeholder' => $searchPlaceholder ?? null
        ])
    @endif

    @if($displayRowsCount ?? true)
        <div class="table-rows-count">
            一共查找到 <span id="rowsCount-{{$id}}">0</span> 条记录
        </div>
    @endif

    <button class="btn reset-page space-right-auto" onclick="location.reload();">
        重置
    </button>

    @if(!empty($massDeleteRoute) && ($selectRows ?? false))
        <button class="btn btn-danger mass-delete-button {{$massDeleteButtonClass ?? ''}}" data-table="{{$id}}" data-route="{{$massDeleteRoute}}" data-method="{{$massDeleteMethod ?? 'POST'}}">
            {{$massDeleteButtonText ?? __('Batch_deletion')}}

            @if($displayMassDeleteCounter ?? false)
                <span class="mass-delete-counter" id="massDeleteCounter-{{$id}}"></span>
            @endif
        </button>
    @endif

    @if(!empty($exportRoute))
        <button class="btn btn-success export-button {{$exportButtonClass ?? ''}}" data-route="{{$exportRoute}}">
            {{$exportButtonText ?? __('Export')}}
        </button>
    @endif

    @if(!empty($buttons))
        @include('data_table.components.tables.shared.buttons')
    @endif
</div>

<div class="data-table-container {{$class ?? ''}}">
    @if($toggleColumns ?? false)
        @include('data_table.components.tables.shared.columns_list')
    @endif

    <table 
        class="data-table-base table table-border table-bordered table-hover table-bg table-sort display"
        id="{{$id}}"
        data-table-columns="{{json_encode($setupColumns)}}"
        data-default-sorting-column="{{$defaultSortBy ?? ''}}"
        data-default-sorting-order="{{$defaultSortOrder ?? \App\Utilities\DataTable\DataTableTables::SORT_ORDER_ASCENDING}}"
        data-select-rows="{{$selectRows ?? ''}}"
        data-select-data="{{$selectFieldName ?? ''}}"
        data-data="{{json_encode($data ?? [])}}"
        data-server-side="{{$useAjax ?? ''}}"
        data-url="{{$route ?? ''}}"
        data-ajax-method="{{$ajaxMethod ?? ''}}"
        data-ajax-data-type="{{$ajaxDataType ?? ''}}"
        data-ajax-data="{{json_encode($ajaxData ?? [])}}"
        data-tab="{{$defaultTab ?? ''}}"
        data-tabs="{{$table['tabsId'] ?? ''}}"
        data-fixed-columns-left="{{$fixedColumnsLeft ?? 0}}"
        data-fixed-columns-right="{{$fixedColumnsRight ?? 0}}"
        data-fit-height="{{($fitHeight ?? false) ? 'true' : 'false'}}"
        data-height-offset="{{$heightOffset ?? 0}}"
        data-lazy-load-image-class="{{$lazyLoadImageClass ?? ''}}"
    >
        <thead>
            <tr>
                @if($selectRows ?? false)
                    <th title="select">
                        <input type="checkbox" class="table-checkbox check-all" value="">
                    </th>
                @endif

                @php
                    /**
                    * @var array $column
                    */
                @endphp

                @foreach($setupColumns as $column)
                    <th title="{{$column['data']}}">{{$column['header']}}</th>
                @endforeach
            </tr>
        </thead>
    </table>
</div>