@props([
    'headers' => [],
    'searchPlaceholder' => 'Search...',
    'searchId' => null,
])

<div class="chart-card">
    @if($searchId)
    <div class="chart-card-header">
        <div class="procure-search" style="max-width:250px;">
            <i class="fas fa-search"></i>
            <input type="text" id="{{ $searchId }}" placeholder="{{ $searchPlaceholder }}" style="width:100%;">
        </div>
        @if(isset($headerActions))
            <div>{{ $headerActions }}</div>
        @endif
    </div>
    @endif
    <div class="chart-card-body" style="overflow-x:auto;">
        <table class="procure-table">
            @if(count($headers))
            <thead>
                <tr>
                    @foreach($headers as $header)
                        <th>{{ $header }}</th>
                    @endforeach
                </tr>
            </thead>
            @endif
            <tbody>
                {{ $slot }}
            </tbody>
        </table>
    </div>
</div>