<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>