@props([
    'createRoute' => null,
    'tableHeading',
    'createLabel' => 'Add New',
    'headers' => [],
    'showCreateButton' => true,
    'showTableHeading' => false,
    'tableSubtitle' => null,
    'pagination' => '',
    'headerSuffixHtml' => [],
    'headerAction' => null,
    'headerToolbar' => null,
    'tableId' => 'example1',
    'paginationClass' => '',
    'emptyMessage' => null,
    'emptyHint' => null,
    'sortColumns' => [],
    'perPageSlot' => null,
    'filterRow' => null,
])

@php
    $hasHeaderActions = $headerAction || ($showCreateButton && $createRoute);
    $showCardHeader = $showTableHeading || $tableSubtitle || $headerToolbar || $hasHeaderActions;
@endphp

<div class="card pms-index-card">
    @if ($showCardHeader)
        <div class="card-header pms-index-card__header">
            <div class="pms-index-card__header-inner">
                @if ($showTableHeading || $tableSubtitle)
                    <div class="pms-index-card__heading">
                        <span class="pms-index-card__heading-icon" aria-hidden="true">
                            <i class="fas fa-table"></i>
                        </span>
                        <div class="pms-index-card__heading-text">
                            @if ($showTableHeading)
                                <h3 class="pms-index-card__title mb-0">{{ $tableHeading }}</h3>
                            @endif
                            @if ($tableSubtitle)
                                <p class="pms-index-card__subtitle mb-0">{{ $tableSubtitle }}</p>
                            @endif
                        </div>
                    </div>
                @else
                    <div class="pms-index-card__heading pms-index-card__heading--compact">
                        <span class="pms-index-card__heading-icon pms-index-card__heading-icon--sm" aria-hidden="true">
                            <i class="fas fa-database"></i>
                        </span>
                        <span class="pms-index-card__listing-label">Listing</span>
                    </div>
                @endif

                <div class="pms-index-card__header-end">
                    @if ($headerToolbar)
                        <div class="pms-index-card__toolbar index-card-header-toolbar">
                            {!! $headerToolbar !!}
                        </div>
                    @endif
                    @if ($hasHeaderActions)
                        <div class="pms-index-card__actions">
                            @if ($headerAction)
                                {!! $headerAction !!}
                            @elseif ($showCreateButton && $createRoute)
                                <a href="{{ $createRoute }}" class="btn btn-primary pms-index-card__create-btn">
                                    <i class="fas fa-plus" aria-hidden="true"></i>
                                    <span class="pms-index-card__create-btn-label">{{ $createLabel }}</span>
                                </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <div class="card-body">
        @if (isset($filterSlot))
            <div class="index-card-filter-slot mb-3">
                {!! $filterSlot !!}
            </div>
        @endif
        <div class="table-responsive">
            <table
                id="{{ $tableId }}"
                class="table table-striped table-bordered pms-index-datatable"
                style="width: 100%;"
                @if($emptyMessage) data-pms-empty-message="{{ $emptyMessage }}" @endif
                @if($emptyHint) data-pms-empty-hint="{{ $emptyHint }}" @endif
            >
                <thead>
                    <tr>
                        @foreach ($headers as $index => $header)
                            <th @class(['pms-sortable-th' => !empty($sortColumns[$index])]) @if(!empty($sortColumns[$index])) data-sort-col="{{ $sortColumns[$index] }}" @endif>
                                @if($index === 0 && isset($firstHeader))
                                    {!! $firstHeader !!}
                                @else
                                    {{ $header }}
                                @endif
                                @if(!empty($headerSuffixHtml[$index] ?? null))
                                    {!! $headerSuffixHtml[$index] !!}
                                @endif
                            </th>
                        @endforeach
                    </tr>
                    @if (isset($filterRow))
                        {!! $filterRow !!}
                    @endif
                </thead>
                <tbody>
                    {{ $slot }}
                </tbody>
            </table>
        </div>

        @if (isset($perPageSlot) || isset($paginationSlot) || ! empty($pagination))
            <div class="pms-index-card__pagination {{ $paginationClass }}">
                @if (isset($perPageSlot))
                    <div class="pms-index-card__pagination-perpage">
                        {!! $perPageSlot !!}
                    </div>
                @endif
                <div class="pms-index-card__pagination-links">
                    @if (isset($paginationSlot))
                        {!! $paginationSlot !!}
                    @elseif (! empty($pagination))
                        {!! $pagination !!}
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>