{{--
    brafa Systems — Lock Records. Read-only record table.
    Livewire backing: App\Http\Livewire\LockRecords. $records collection only —
    no wire:* bindings to preserve.
--}}
<div class="brafa-screen">
    <div class="card prop-list">
        <div class="prop-toolbar">
            <h3 class="card-heading" style="margin:0;">Lock records</h3>
        </div>

        <div style="overflow-x: auto;">
            <table class="table table--cards">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Lock ID</th>
                        <th>Battery</th>
                        <th>Server date</th>
                        <th>Type</th>
                        <th>Success</th>
                        <th>Keyboard pwd</th>
                        <th>User</th>
                        <th>Lock name</th>
                        <th>Timestamp</th>
                        <th>Record</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="mono muted" data-label="ID">{{ $record->id }}</td>
                            <td class="mono" data-label="Lock ID">{{ $record->lockId }}</td>
                            <td class="mono" data-label="Battery">{{ $record->electricQuantity }}%</td>
                            <td class="mono muted" data-label="Server date">{{ $record->serverDate }}</td>
                            <td class="mono muted" data-label="Type">{{ $record->recordType }}</td>
                            <td data-label="Success">
                                @if ($record->success)
                                    <span class="pill pill--active"><span class="dot"></span>Yes</span>
                                @else
                                    <span class="pill pill--danger">No</span>
                                @endif
                            </td>
                            <td class="mono" data-label="Keyboard pwd">{{ $record->success ? '****' : $record->keyboardPwd }}</td>
                            <td data-label="User">{{ $record->username }}</td>
                            <td data-label="Lock name">{{ $record->lockName }}</td>
                            <td class="mono muted" data-label="Timestamp">{{ \Carbon\Carbon::createFromTimestamp($record->serverDate / 1000)->toDateTimeString() }}</td>
                            <td data-label="Record">
                                @switch($record->recordType)
                                    @case(67) Face Unlock @break
                                    @case(-4) QR Code @break
                                    @case(4) PIN @break
                                    @case(7) IC Card @break
                                    @case(8) Fingerprint @break
                                    @case(11) Locked @break
                                    @case(12) Unlock via network @break
                                    @case(31) Door Sensor Open @break
                                    @case(30) Door Sensor Closed @break
                                    @case(45) Locked Automatically @break
                                    @case(46) Unlocked with button @break
                                    @case(47) Locked with # @break
                                    @case(48) Unauthorised Access attempts Detected @break
                                    @case(55) Remotely Unlocked @break
                                    @case(1) Unlocked with APP @break
                                    @default Unknown
                                @endswitch
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="11" style="padding:48px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">
                                No lock records found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>