{{#let (or @row.driver this.driver) as |driver|}}
    {{#if driver}}
        <div class="relative flex items-center" ...attributes>
            <img src={{driver.photo_url}} alt={{driver.name}} {{fallback-img-src (config "defaultValues.driverImage")}} class="w-5 h-5 mr-2 rounded-md" />
            <a href="javascript:;" class="relative flex flex-row items-center" disabled={{and @column.permission (cannot @column.permission)}} {{on "click" (fn this.onClick driver)}}>
                <span>{{get-default-value driver.name}}</span>
                {{#if @row.vehicle_assigned}}
                    <div class="ml-2 rounded-lg bg-gray-300 dark:bg-gray-800 opacity-50 px-1 text-xs">
                        <FaIcon @icon="car" @size="xs" class="mr-0.5" />
                        <span>{{n-a @row.vehicle_assigned.display_name}}</span>
                    </div>
                {{else if driver.vehicle}}
                    <div class="ml-2 rounded-lg bg-gray-300 dark:bg-gray-800 opacity-50 px-1 text-xs">
                        <FaIcon @icon="car" @size="xs" class="mr-0.5" />
                        <span>{{n-a driver.vehicle_name}}</span>
                    </div>
                {{/if}}
            </a>
            <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -mt-1 -ml-1 {{if driver.online 'text-green-500' 'text-yellow-200'}}" />
        </div>
    {{else}}
        <div class="flex items-center">
            <span>{{t "fleet-ops.component.cell.driver-name.not-assigned"}}</span>
        </div>
    {{/if}}
{{/let}}