@props(['records', 'countryCodes' => []])

<div class="d-flex justify-content-between align-items-center mb-3">

    <div class="d-flex align-items-center gap-3">

        <h5 class="mb-0">
            DPRK Sanctions List
        </h5>

        {{-- <span class="text-muted small">
            Last Updated: 19/08/2026
        </span> --}}

    </div>

    <span class="badge bg-secondary">
        {{ $records->total() }} Records
    </span>

</div>


<div class="table-responsive">

    <table class="table table-hover align-middle mb-0">

        <thead class="table-light">

            <tr>

                <th style="width: 50px;">
                    No.
                </th>

                <th style="width: 200px;">
                    Name
                </th>

                <th style="width: 260px;">
                    Designation
                </th>

                <th style="width: 220px;">
                    Nationality
                </th>

                <th style="width: 180px;">
                    Passport / ID No.
                </th>

                <th style="width: 130px;">
                    Date Listed
                </th>

                <th style="width: 160px;">
                    Action
                </th>

            </tr>

        </thead>


        <tbody>

            @forelse ($records as $record)

                <tr>

                    {{-- NO --}}
                    <td>
                        {{ $records->firstItem() + $loop->index }}
                    </td>


                    {{-- NAME --}}
                    <td class="fw-semibold">

                        {{ trim(($record->FIRST_NAME ?? '') . ' ' . ($record->SECOND_NAME ?? '') . ' ' . ($record->THIRD_NAME ?? '')) ?:
                            '-' }}

                    </td>


                    {{-- DESIGNATION --}}
                    <td
                        style="
                            white-space: normal;
                            word-wrap: break-word;
                        ">
                        {{ $record->DESIGNATION ?: '-' }}
                    </td>


                    {{-- NATIONALITY --}}
                    <td>

                        @php
                            $iso3 = $record->NATIONALITY
                                ? $countryCodes[strtolower(trim($record->NATIONALITY))] ?? null
                                : null;

                            $flagCode = $this->getFlagCode($iso3);
                        @endphp

                        @if ($record->NATIONALITY)
                            <div class="d-flex align-items-center gap-2">

                                @if ($flagCode)
                                    <span class="fi fi-{{ $flagCode }}" style="font-size: 18px;"></span>
                                @endif

                                <span>
                                    {{ $record->NATIONALITY }}
                                </span>

                            </div>
                        @else
                            -
                        @endif

                    </td>


                    {{-- PASSPORT / ID --}}
                    <td>
                        {{ $record->PASSPORT ?: '-' }}
                    </td>


                    {{-- DATE LISTED --}}
                    <td>

                        {{ $record->LISTED_ON ? \Carbon\Carbon::parse($record->LISTED_ON)->format('d/m/Y') : '-' }}

                    </td>



                    <td>
                        <div class="d-flex gap-1">

                            <button type="button" class="btn btn-sm btn-outline-primary"
                                wire:click="openUnscr1718({{ $record->id }})">
                                View
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-warning"
                                wire:click="openUnscr1718Edit({{ $record->id }})">
                                Edit
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-danger"
                                wire:click="openUnscr1718Delete({{ $record->id }})">
                                Delete
                            </button>
                        </div>
                    </td>

                </tr>


            @empty

                <tr>

                    <td colspan="7" class="text-center text-muted py-4">
                        No UNSCR 1718 records found.
                    </td>

                </tr>

            @endforelse

        </tbody>

    </table>

</div>


<div class="mt-3">
    {{ $records->links() }}
</div>