<div class="vehicle-details-maintenance-history p-4">
    {{#if this.maintenanceHistory.isRunning}}
        <div class="flex items-center justify-center py-10">
            <Spinner />
        </div>
    {{else}}
        {{#if this.maintenanceHistory.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">Summary</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Type</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Odometer</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Total Cost</th>
                        <th class="text-left py-2 pr-4 font-semibold text-gray-500 uppercase tracking-wide">Date</th>
                        <th class="py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    {{#each this.maintenanceHistory as |record|}}
                        <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">{{record.summary}}</td>
                            <td class="py-2 pr-4 text-gray-500">{{humanize record.type}}</td>
                            <td class="py-2 pr-4 text-gray-500">{{n-a record.odometer_reading}} {{record.odometer_unit}}</td>
                            <td class="py-2 pr-4">{{format-currency record.total_cost record.currency}}</td>
                            <td class="py-2 pr-4 text-gray-500">{{n-a (format-date-fns record.completed_at "dd MMM yyyy")}}</td>
                            <td class="py-2">
                                <Button @icon="eye" @size="xs" @onClick={{fn this.maintenanceActions.transition.view record}} />
                            </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="history" @size="2x" class="mb-3" />
                <p class="text-sm">No maintenance history for this vehicle.</p>
                <Button @text="Log Maintenance" @icon="plus" @size="xs" @type="primary" class="mt-3" @onClick={{fn this.maintenanceActions.modal.create (hash maintainable=@vehicle)}} />
            </div>
        {{/if}}
    {{/if}}
</div>