<div class="fixed inset-0 flex items-center justify-center z-50">

    {{-- <div class="bg-white max-h-[80vh] overflow-hidden p-6 rounded-lg shadow-lg pointer-events-auto"
    style="width:30vw !important; max-width:none !important;"> --}}

    <div
        class="bg-white rounded-lg shadow-lg pointer-events-auto
               w-full max-w-2xl max-h-[90vh] flex flex-col">

        {{-- @if($records && $records->count()) --}}
        @if(!empty($records) && count($records))
            <div style="max-height:250px; overflow-y:auto; border:1px solid #ccc;">

            {{-- <table class="min-w-full border"> --}}
            <table class="w-full table-fixed border text-sm">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border px-2 py-1 w-2/3">Characteristics</th>
                        <th class="border px-2 py-1 w-1/6">OK</th>
                        <th class="border px-2 py-1 w-1/6">Not OK</th>
                        <th class="border px-2 py-1 w-1/6">N/A</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($records as $record)
                        <tr>
                            <td class="border p-2">
                                {{ $record['name'] }}
                            </td>

                            <td class="border text-center">
                                <input type="radio"
                                    wire:model="checklist.{{ $record['id'] }}"
                                    value="ok">
                            </td>

                            <td class="border text-center">
                                <input type="radio"
                                    wire:model="checklist.{{ $record['id'] }}"
                                    value="not_ok">
                            </td>

                            <td class="border text-center">
                                <input type="radio"
                                    wire:model="checklist.{{ $record['id'] }}"
                                    value="na">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p>No records found.</p>
        @endif
        <div class="border-t mt-6 pt-4 flex justify-end gap-3">

            <button
                type="button"
                wire:click="cancel"
                style="background-color:#dc2626; color:white;"
                    class="px-6 py-2 rounded-lg shadow-md"
            >
                Cancel
            </button>

            <button
                type="button"
                wire:click="saveChecklist"
                style="background-color:#16a34a; color:white;"
                class="px-6 py-2 rounded-lg shadow-md"
            >
                Save
            </button>
        </div>
    </div>
</div>
