<div class="vehicle-details-work-orders p-4">
    {{#if this.loadWorkOrders.isRunning}}
        <div class="flex items-center justify-center py-10">
            <Spinner />
        </div>
    {{else}}
        {{#if this.workOrders.length}}
            <table class="min-w-full text-xs">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-700">
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Code</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Subject</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Priority</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Status</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Due</th>
                        <th class="py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this.workOrders as |workOrder|}}
                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
                            <td class="py-2 pr-4 font-mono uppercase">{{workOrder.code}}</td>
                            <td class="py-2 pr-4 font-medium">{{workOrder.subject}}</td>
                            <td class="py-2 pr-4 text-gray-500">{{humanize workOrder.priority}}</td>
                            <td class="py-2 pr-4"><StatusBadge @status={{workOrder.status}} /></td>
                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns workOrder.due_at "dd MMM yyyy")}}</td>
                            <td class="py-2">
                                <Button @icon="eye" @size="xs" @onClick={{fn this.workOrderActions.transition.view workOrder}} />
                            </td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
        {{else}}
            <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
                <FaIcon @icon="clipboard-list" @size="2x" class="mb-3" />
                <p class="text-sm">No work orders for this vehicle.</p>
                <Button @text="Create Work Order" @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{fn this.workOrderActions.modal.create (hash target=@vehicle)}} />
            </div>
        {{/if}}
    {{/if}}
</div>