@local <!-- views/components/pages/data-table.blade.php --> @endlocal
@props(['jobs_data' => [], 'jsDataTableClass', 'key1' => '', 'key2' => '', 'key3' => ''])
@php
    $data_to_use = [];
    $id_prefix = '';
    if($key1 && !$key2){
        $data_to_use = $jobs_data[$key1];
        $id_prefix = $key1;
    }
    if($key1 && $key2 && !$key3){
        $data_to_use = $jobs_data[$key1][$key2];
        $id_prefix = "{$key1}-{$key2}";
    }
    if($key1 && $key2 && $key3){
        $data_to_use = $jobs_data[$key1][$key2][$key3];
        $id_prefix = "{$key1}-{$key2}-{$key3}";
    }
@endphp
<table class="table table-bordered table-striped table-vcenter {{ $jsDataTableClass }}">
    @if(isset($key1) && $key1)
        <thead>
        <tr>
            <th>Title</th>
            <th>Posted</th>
            <th>Location</th>
            <th>Exp</th>
            <th>Hires</th>
            <th>FB</th>
            <th>Budget</th>
            <th>Duration</th>
            <th>Skills</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach ($data_to_use as $i => $job)
            <tr>
                @if($job['desc_len'] < 2500)
                    <td class="fw-semibold joburl" id="{{$id_prefix}}-joburl_{{$job['ciphertext']}}" data-bs-toggle="popover" data-bs-container="#popover-container2" data-bs-trigger="hover" data-bs-placement="top" title="" data-bs-content="{{$job['description']}}">
                @else
                    <td class="fw-semibold joburl" id="{{$id_prefix}}-joburl_{{$job['ciphertext']}}" data-bs-toggle="popover" data-bs-container="#popover-container3" data-bs-trigger="hover" data-bs-placement="top" title="" data-bs-content="{{$job['description']}}">
                @endif
                     <div class="d-flex flex-column">
                        @if($job['favourite'])
                            <span class="title text-danger">{{$job['title']}} </span>
                        @else
                            <span class="title">{{$job['title']}} </span>
                        @endif
                        <span class="title text-warning mt-3"><span class="text-primary">Category:</span> {{$job['category']}}</span>
                        <span class="title text-warning mt-3"><span class="text-primary">subCategory:</span> {{$job['subCategory']}}</span>
                    </div>

                </td>
                <td class="d-none d-sm-table-cell text-center">
                    <span class="text-muted">{{$job['posted']}}</span>
                </td>
                <td class="text-muted">
                    <span>{{$job['location']}}</span>
                </td>
                <td class="text-muted text-center">
                    <span>{{$job['experienceLevel']}}</span>
                </td>
                <td class="text-muted">
                    <span>{{$job['hires']}}</span>
                </td>
                <td class="text-muted">
                    <span>{{$job['feedback']}}</span>
                </td>
                <td class="text-muted">
                    <span>{{$job['budget']}}</span>
                </td>
                <td class="text-muted">
                    <span>{{$job['duration']}}</span>
                </td>
                <td class="text-muted truncated smaller" data-bs-toggle="popover" data-bs-container="#popover-container1" data-bs-placement="left" title="" data-bs-content="{{$job['skills']}}">
                    <span>{{$job['skills']}} </span>
                </td>
                <td class="text-muted">
                    <button class="btn btn-tools-green apply hidden" id="{{$id_prefix}}-apply_{{$job['id']}}" data-bs-toggle="modal" data-bs-target="#chatgpt-modal">Apply</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-tools-green reject" id="{{$id_prefix}}-reject_{{$job['id']}}">Reject</button>
                        <button type="button" class="btn btn-tools-green dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item apply" href="#">Apply</a></li>
                            @if($job['favourite'])
                                <li><a class="dropdown-item remove favourite" id="{{$id_prefix}}-remove-favourite_{{$job['id']}}" href="#">Remove Favourite</a></li>
                                <li><a class="dropdown-item add favourite hidden" id="{{$id_prefix}}-add-favourite_{{$job['id']}}" href="#">Set as Favourite</a></li>
                            @else
                                <li><a class="dropdown-item remove favourite hidden" id="{{$id_prefix}}-remove-favourite_{{$job['id']}}" href="#">Remove Favourite</a></li>
                                <li><a class="dropdown-item add favourite" id="{{$id_prefix}}-add-favourite_{{$job['id']}}" href="#">Set as Favourite</a></li>
                            @endif
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item read" id="{{$id_prefix}}-read_{{$job['id']}}" href="#">Mark as read</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        @endforeach
        </tbody>
    @else
        {{ $slot }}
    @endif
</table>