<div class="vehicle-details-schedules p-4">
    {{#if this.schedules.isRunning}}
        <div class="flex items-center justify-center py-10">
            <Spinner />
        </div>
    {{else}}
        {{#if this.schedules.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">Name</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Interval</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Next Due</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Status</th>
                        <th class="py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this.schedules as |schedule|}}
                        <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-medium">{{schedule.name}}</td>
                            <td class="py-2 pr-4 text-gray-500">{{schedule.interval_value}} {{schedule.interval_unit}}</td>
                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns schedule.next_due_date "dd MMM yyyy")}}</td>
                            <td class="py-2 pr-4"><StatusBadge @status={{schedule.status}} /></td>
                            <td class="py-2">
                                <Button @icon="eye" @size="xs" @onClick={{fn this.maintenanceScheduleActions.transition.view schedule}} />
                            </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="calendar-alt" @size="2x" class="mb-3" />
                <p class="text-sm">No maintenance schedules for this vehicle.</p>
                <Button @text="Add Schedule" @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{fn this.maintenanceScheduleActions.modal.create (hash subject=@vehicle)}} />
            </div>
        {{/if}}
    {{/if}}
</div>