{{-- wrapper --}}
<div>
    <div class="row pt-2 align-items-center" style="margin-bottom: 40px">





        {{-- empty --}}
        <div class="col-3"></div>







        {{-- search --}}
        <div class="col-6">
            <input wire:model.live.debounce.50ms='searchExpertDate'
                class="form-control form--input main-version mx-auto" type="date" />
        </div>






        {{-- counter --}}
        <div class="col-3 text-end">

            <h3 data-bs-toggle="tooltip" data-bss-tooltip=""
                class="fw-bold rounded-0 border-bottom text-theme scale--self-05 d-inline-block pb-1 mb-0 border-theme"
                title="{{__('Number of Expert Hearings')}}">{{ $experts?->total() ?? 0 }}</h3>
        </div>




    </div>
    {{-- endRow --}}









    {{-- ---------------------------------------------------------------------- --}}
    {{-- ---------------------------------------------------------------------- --}}










    {{-- contentRow --}}
    <div class="row pt-2 row align-items-center mb-4">






        {{-- tableContent --}}
        <div class="col-12">
            <div class="table-responsive memoir--table">
                <table class="table table-bordered" id="memoir--table">




                    {{-- headers --}}
                    <thead>
                        <tr>
                            <th class='th--xs'></th>
                            <th class='th--sm'>{{__('Hearing Date')}}</th>
                            <th class='th--sm'>{{__('Hearing Type')}}</th>
                            <th class='th--sm'>{{__('Advisor')}}</th>
                            <th class='th--lg'>{{__('Issued Verdict')}}</th>
                            <th class='th--xs'></th>
                        </tr>
                    </thead>
                    {{-- endHeaders --}}






                    {{-- ------------------------------------- --}}
                    {{-- ------------------------------------- --}}







                    {{-- body --}}
                    <tbody>


                        {{-- loop - experts --}}
                        @foreach ($experts ?? [] as $expert)

                        <tr key='single-case-expert-{{ $expert->id }}'>



                            {{-- 1: expertDate --}}
                            <td class='fw-semibold'>{{ $globalSNCounter++ }}</td>
                            <td dir='ltr'>{{ date('d / m / Y', strtotime($expert->hearingDate))}}</td>




                            {{-- 1.2: type - advisor verdict --}}
                            <td>{{ $expert?->hearingType?->{__('name')} }}</td>
                            <td>{{ $expert?->advisor?->{__('name')} }}</td>
                            <td>{{ $expert?->{__('courtDecision')} }}</td>






                            {{-- 2: manage --}}
                            <td>
                                <button data-bs-toggle="modal" data-bs-target='#manage-phases'
                                    class="btn fs-11 px-3 btn--scheme-outline-3 fw-semibold py-1 px-2"
                                    wire:loading.attr="disabled"
                                    wire:click="manage({{ $expert->id }})">{{__('Phases')}}</button>
                            </td>




                        </tr>

                        @endforeach
                        {{-- end loop --}}




                    </tbody>
                </table>
            </div>
        </div>
        {{-- endTable --}}








        {{-- ---------------------------- --}}
        {{-- ---------------------------- --}}






        {{-- pagination --}}
        <div class="col-12 mt-3">{{ $experts?->links() }}</div>




    </div>
</div>
{{-- end wrapper --}}