{{#if this.telematic}}
    {{#if this.compact}}
        <button
            type="button"
            disabled={{and @column.permission (cannot @column.permission)}}
            {{on "click" this.onClick}}
            class="group flex w-full min-w-0 cursor-pointer items-center gap-2 py-0.5 text-left"
            data-test-telematic-provider-compact
            ...attributes
        >
            <Image src={{this.icon}} @fallbackSrc="/engines-dist/images/telematics/providers/default.webp" class="h-5 w-5 flex-shrink-0 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
            <div class="min-w-0 truncate text-sm leading-4 text-gray-900 group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
        </button>
    {{else}}
        <button
            type="button"
            disabled={{and @column.permission (cannot @column.permission)}}
            {{on "click" this.onClick}}
            class="group flex w-full min-w-0 max-w-md cursor-pointer items-start gap-2 py-1 text-left"
            ...attributes
        >
            <div class="pt-0.5">
                <Image src={{this.icon}} @fallbackSrc="/engines-dist/images/telematics/providers/default.webp" class="mr-0.5 h-8 w-8 flex-shrink-0 rounded-md border border-gray-200 object-cover shadow-sm dark:border-gray-700" />
            </div>
            <div class="min-w-0 text-left">
                <div class="truncate text-sm text-gray-900 group-hover:text-blue-600 dark:text-gray-100 dark:group-hover:text-blue-300">{{n-a this.name}}</div>
                <div class="mt-0.5 max-w-[225px] truncate whitespace-nowrap text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
            </div>
        </button>
    {{/if}}
{{else}}
    <div class="py-1 text-xs text-gray-400 dark:text-gray-500" data-test-telematic-provider-empty-text ...attributes>{{this.emptyText}}</div>
{{/if}}