<div class="ui-unit-input {{@wrapperClass}}">
    <div class="flex rounded-md shadow-sm">
        <Input @type="tel" @value={{@value}} class="form-input rounded-r-none" placeholder={{this.placeholder}} ...attributes />
        <span
            class="shadow-sm inline-flex items-center px-3 border rounded-r-lg border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 sm:text-sm"
        >
            {{#if @canSelectUnit}}
                <PowerSelect
                    class="unit-input-selector"
                    @renderInPlace={{true}}
                    @options={{this.units}}
                    @selected={{this.selectedUnitObject}}
                    @onChange={{this.setUnit}}
                    @triggerComponent={{component "unit-input/unit-handle" unit=this.selectedUnitObject}}
                    as |unit|
                >
                    <div class="truncate flex items-center space-x-1">
                        <span>{{unit.name}}</span>
                        <span class="italic">({{unit.value}})</span>
                    </div>
                </PowerSelect>
            {{else}}
                <span>{{this.unit}}</span>
            {{/if}}
        </span>
    </div>
</div>