<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
    <div class="input-group mb-2">
        <InputLabel @labelText={{t "fleet-ops.component.avatar-picker.select-map-avatar"}} @helpText={{t "fleet-ops.component.avatar-picker.select-avatar-rendering"}} />
        <FetchSelect @wrapperClass="w-60" @placeholder={{t "fleet-ops.component.avatar-picker.select-avatar"}} @endpoint={{this.endpoint}} @selected={{this.model.avatar_value}} @optionValue="value" @onChange={{this.selectAvatar}} as |option|>
            {{titleize (humanize option.key)}}
        </FetchSelect>
    </div>
    <div class="flex flex-row justify-end">
        {{#if this.model.avatar_custom_url}}
            <Image alt={{this.model.displayName}} src={{this.model.avatar_custom_url}} @fallbackSrc={{@defaultAvatar}} class="w-24 h-24" />
        {{else}}
            <Image alt={{this.model.displayName}} src={{this.model.avatar_url}} @fallbackSrc={{@defaultAvatar}} class="w-24 h-24" />
        {{/if}}
    </div>
</div>