<div class="px-4 py-3" ...attributes>
    <div class="flex flex-1 flex-row items-start justify-between gap-4">
        <div class="flex min-w-0 flex-row items-start gap-3">
            <div class="relative flex flex-shrink-0 items-start justify-start">
                <Image
                    src={{this.resource.photo_url}}
                    @fallbackSrc={{config "defaultValues.placeholderImage"}}
                    alt={{this.name}}
                    height="48"
                    width="48"
                    class="h-14 w-14 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700"
                />
                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                    <InputInfo @text={{this.name}} />
                </Attach::Tooltip>
            </div>
            <div class="flex min-w-0 flex-col">
                <div class="flex min-w-0 flex-wrap items-center gap-2">
                    <h1 class="truncate text-base font-semibold leading-5 text-gray-900 dark:text-gray-100">{{this.name}}</h1>
                    <Badge @status={{this.connectionStatus}} @size="xs">{{smart-humanize this.connectionStatus}}</Badge>
                </div>

                <div class="mt-1 flex max-w-2xl flex-wrap items-center gap-1.5">
                    {{#if this.provider}}
                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
                            <FaIcon @icon="satellite-dish" class="text-gray-400 dark:text-gray-300" />
                            <span class="truncate">{{titleize this.provider}}</span>
                        </span>
                    {{/if}}
                    {{#if this.type}}
                        <span class="inline-flex max-w-[10rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
                            <FaIcon @icon="microchip" class="text-gray-400 dark:text-gray-300" />
                            <span class="truncate">{{n-a (get-fleet-ops-option-label "deviceTypes" this.type)}}</span>
                        </span>
                    {{/if}}
                    {{#if this.identifier}}
                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
                            <FaIcon @icon="id-card" class="text-gray-400 dark:text-gray-300" />
                            <span class="truncate">{{this.identifier}}</span>
                        </span>
                    {{/if}}
                    {{#if this.attachedVehicle}}
                        <span class="inline-flex max-w-[12rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
                            <FaIcon @icon="car" class="text-gray-400 dark:text-gray-300" />
                            <span class="truncate">{{this.attachedVehicle}}</span>
                        </span>
                    {{/if}}
                    <span class="inline-flex max-w-[13rem] items-center gap-1 truncate rounded-md bg-gray-100 px-1.5 py-0.5 text-[11px] font-medium leading-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
                        <FaIcon @icon="clock" class="text-gray-400 dark:text-gray-300" />
                        <span class="truncate">{{#if this.lastOnlineAt}}{{format-date-fns this.lastOnlineAt "dd MMM yyyy, HH:mm"}}{{else}}No last online{{/if}}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="next-view-header-right flex-shrink-0">
            <Layout::Resource::Panel::HeaderActions
                @resource={{this.resource}}
                @saveTask={{@saveTask}}
                @saveOptions={{@saveOptions}}
                @saveDisabled={{@saveDisabled}}
                @pojoResource={{@pojoResource}}
                @authSchema={{@authSchema}}
                @actionButtons={{@actionButtons}}
                @onPressCancel={{@onPressCancel}}
            />
        </div>
    </div>
</div>
