<div class="form-wrapper" ...attributes>
    <ContentPanel @title={{t "custom-entity.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="space-y-2">
            <InputGroup @name={{t "custom-entity.fields.name"}} @value={{@resource.name}} />
            <InputGroup @name={{t "custom-entity.fields.description"}} @value={{@resource.description}} />
            <InputGroup @name={{t "custom-entity.fields.type"}} @value={{@resource.type}} {{on "input" this.setCustomEntityType}} />
        </div>
    </ContentPanel>
    <ContentPanel @title={{t "custom-entity.fields.entity-image"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="w-32 flex flex-col items-center">
            <Image src={{@resource.photo_url}} alt={{@resource.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
            <UploadButton
                @name={{t "common.photos"}}
                @accept="image/*"
                @onFileAdded={{this.onFileAdded}}
                @disabled={{not (and @resource.name @resource.description)}}
                @helpText={{if (not (and @resource.name @resource.description)) "Input custom entity name and description first to upload image" ""}}
                class="w-32"
            />
        </div>
    </ContentPanel>
    <ContentPanel @title={{t "custom-entity.fields.measurements"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-2 gap-2">
            <InputGroup @name={{t "custom-entity.fields.length"}} @helpText={{t "custom-entity.fields.length-text"}} @wrapperClass="mb-2">
                <UnitInput class="w-full" @value={{@resource.length}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{this.updateCustomEntityDimensionsUnit}} />
            </InputGroup>
            <InputGroup @name={{t "custom-entity.fields.width"}} @helpText={{t "custom-entity.fields.width-text"}} @wrapperClass="mb-2">
                <UnitInput class="w-full" @value={{@resource.width}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{this.updateCustomEntityDimensionsUnit}} />
            </InputGroup>
            <InputGroup @name={{t "custom-entity.fields.height"}} @helpText={{t "custom-entity.fields.height-text"}} @wrapperClass="mb-2">
                <UnitInput class="w-full" @value={{@resource.height}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{this.updateCustomEntityDimensionsUnit}} />
            </InputGroup>
            <InputGroup @name={{t "custom-entity.fields.weight"}} @helpText={{t "custom-entity.fields.weight-text"}} @wrapperClass="mb-2">
                <UnitInput
                    class="w-full"
                    @value={{@resource.weight}}
                    @measurement="weight"
                    @unit={{@resource.weight_unit}}
                    @canSelectUnit={{true}}
                    @onUnitChange={{this.updateCustomEntityWeightUnit}}
                />
            </InputGroup>
        </div>
    </ContentPanel>
</div>