@php
    $record = $getRecord();
@endphp
@if ($record['active'])
    <div draggable="false"
        class="w-full mt-1 border dark:border-gray-600 border-gray-200  text-xs select-none rounded transition-colors grid grid-cols-16 gap-1 items-center">
        <div class="col-span-10 text-[10px] text-center grid grid-cols-10 content-center items-center gap-1">
            <div class="text-green-600 dark:text-green-500">{{ $record['gls'] }}</div>
            <div>{{ $record['fls'] }}</div>
            <div class="text-green-600 dark:text-green-500"><div class="text-green-600 dark:text-green-500"></div>{{ $record['ofs'] }}</div>
            <div>{{ $record['crd'] }}</div>
            <div class="text-green-600 dark:text-green-500">{{ $record['snt'] }}</div>
            <div>{{ $record['tsh'] }}</div>
            <div class="text-blue-600 dark:text-blue-500">{{ $record['foot'] }}</div>
            <div>{{ $record['tot_evt'] }}</div>
            <div>{{ $record['ave_min'] }}</div>
            <div class="border border-gray-400 rounded font-bold p-0.5">{{ $record['pos'] }}</div>
        </div>
        <div class="text-center">
            <div class="{{ $record['color_pos'] }}">
                {{ ucfirst($record['pos_ori']) }}
            </div>
        </div>
        <div class="col-span-4  text-left text-sm  overflow-hidden tracking-tight text-amber-600">
            {{ $record['name'] }}
        </div>
        <div class="w-8 flex justify-end">
        </div>
    </div>
@else
    <div draggable="true"
        x-on:dragstart="e => {
        e.dataTransfer.effectAllowed = 'copy';
        e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $record['id'] }} }));
    }"
        class="w-full mt-1 border dark:border-gray-600 border-gray-200 hover:border-blue-500 text-xs select-none cursor-grab active:cursor-grabbing rounded transition-colors grid grid-cols-16 gap-1 items-center">
        <div class="col-span-10 text-[10px] text-center grid grid-cols-10 content-center items-center gap-1">
            <div class="text-green-600 dark:text-green-500">{{ $record['gls'] }}</div>
            <div>{{ $record['fls'] }}</div>
            <div class="text-green-600 dark:text-green-500">{{ $record['ofs'] }}</div>
            <div>{{ $record['crd'] }}</div>
            <div class="text-green-600 dark:text-green-500">{{ $record['snt'] }}</div>
            <div>{{ $record['tsh'] }}</div>
            <div class="text-blue-600 dark:text-blue-500">{{ $record['foot'] }}</div>
            <div>{{ $record['tot_evt'] }}</div>
            <div>{{ $record['ave_min'] }}</div>
            <div></div>
        </div>
        <div class="text-center">
            <div class="{{ $record['color_pos'] }}">
                {{ ucfirst($record['pos_ori']) }}
            </div>
        </div>
        <div class="col-span-4 overflow-hidden tracking-tight text-sm">
            {{ $record['name'] }}
        </div>
        <div class="flex justify-end">
            <x-phosphor-dots-six-vertical class="h-5 w-5" />
        </div>
    </div>
@endif