<div class="form-wrapper" ...attributes>
    <ContentPanel @title="Integration" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
            <InputGroup @name={{t "device.fields.telematic"}}>
                <ModelSelect
                    @modelName="telematic"
                    @selectedModel={{@resource.telematic}}
                    @placeholder={{t "device.fields.telematic-placeholder"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{this.selectTelematic}}
                    @disabled={{or (cannot-write @resource) this.isTelematicLocked}}
                    as |model|
                >
                    <div class="space-x-2 text-sm">
                        <div class="inline-block align-top">
                            <div class="hide-from-trigger h-1.5 w-full"></div>
                            <Image src={{model.provider_descriptor.icon}} class="w-5 h-5" />
                        </div>
                        <div class="inline-block">
                            <div class="font-semibold normalize-in-trigger">{{or model.name model.public_id}}</div>
                            <div class="hide-from-trigger">{{n-a model.provider_descriptor.label (titleize model.provider)}}</div>
                        </div>
                    </div>
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "device.fields.device-type"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{get-fleet-ops-options "deviceTypes"}}
                        @selected={{find-by "value" @resource.type (get-fleet-ops-options "deviceTypes")}}
                        @onChange={{set-model-attr @resource "type"}}
                        @placeholder={{t "common.select-field" field=(t "common.type")}}
                        @triggerClass="form-select form-input"
                        @disabled={{cannot-write @resource}}
                        as |option|
                    >
                        <div class="text-sm">
                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
                            <div class="hide-from-trigger">{{option.description}}</div>
                        </div>
                    </PowerSelect>
                </div>
            </InputGroup>

            <InputGroup @name={{t "device.fields.data-frequency"}}>
                <Input
                    @value={{@resource.data_frequency}}
                    @type="text"
                    class="w-full form-input"
                    placeholder={{t "device.fields.data-frequency-placeholder"}}
                    disabled={{cannot-write @resource}}
                />
            </InputGroup>
        </div>
    </ContentPanel>

    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
        <div class="flex flex-row space-x-3 mb-3">
            <div class="flex items-center justify-start rounded-full">
                <Image src={{@resource.photo_url}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                    <InputInfo @text={{t "common.upload-new-photo"}} />
                </Attach::Tooltip>
            </div>
            <div>
                <UploadButton
                    @name={{t "common.photos"}}
                    @accept="image/*"
                    @onFileAdded={{perform this.handlePhotoUpload}}
                    @icon="upload"
                    @size="xs"
                    @buttonText={{t "common.upload-image"}}
                    @disabled={{cannot-write @resource}}
                />
                <div class="px-1">
                    <span class="text-gray-300 dark:text-gray-600 text-xs">{{t "common.upload-image-supported"}}</span>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
            <InputGroup @name={{t "device.fields.device-name"}}>
                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder={{t "device.fields.device-name-placeholder"}} disabled={{cannot-write @resource}} />
            </InputGroup>

            <InputGroup @name={{t "device.fields.device-id"}}>
                <Input @value={{@resource.device_id}} @type="text" class="w-full form-input" placeholder={{t "device.fields.device-id-placeholder"}} disabled={{cannot-write @resource}} />
            </InputGroup>

            <InputGroup @name="Internal ID" @value={{@resource.internal_id}} disabled={{cannot-write @resource}} />
        </div>
    </ContentPanel>

    <ContentPanel @title="Hardware" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 lg:gap-2 no-input-group-padding text-xs">
            <InputGroup @name={{t "device.fields.device-provider"}}>
                <Input
                    @value={{@resource.provider}}
                    @type="text"
                    class="w-full form-input"
                    placeholder={{t "device.fields.device-provider-placeholder"}}
                    disabled={{cannot-write @resource}}
                />
            </InputGroup>

            <InputGroup @name={{t "device.fields.device-model"}}>
                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder={{t "device.fields.device-model-placeholder"}} disabled={{cannot-write @resource}} />
            </InputGroup>

            <InputGroup @name={{t "device.fields.manufacturer"}}>
                <Input
                    @value={{@resource.manufacturer}}
                    @type="text"
                    class="w-full form-input"
                    placeholder={{t "device.fields.manufacturer-placeholder"}}
                    disabled={{cannot-write @resource}}
                />
            </InputGroup>

            <InputGroup @name={{t "device.fields.serial-number"}} @wrapperClass="lg:col-span-3">
                <Input
                    @value={{@resource.serial_number}}
                    @type="text"
                    class="w-full form-input"
                    placeholder={{t "device.fields.serial-number-placeholder"}}
                    disabled={{cannot-write @resource}}
                />
            </InputGroup>
        </div>
    </ContentPanel>

    <ContentPanel @title="Installation & Maintenance" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 lg:gap-2 no-input-group-padding text-xs">
            <InputGroup @name={{t "device.fields.device-location"}} @wrapperClass="lg:col-span-2">
                <Input
                    @value={{@resource.location}}
                    @type="text"
                    class="w-full form-input"
                    placeholder={{t "device.fields.device-location-placeholder"}}
                    disabled={{cannot-write @resource}}
                />
            </InputGroup>

            <InputGroup @name={{t "device.fields.installation-date"}}>
                <DatePicker
                    @value={{@resource.installation_date}}
                    @onChange={{fn (mut @resource.installation_date)}}
                    @placeholder={{t "device.fields.installation-date-placeholder"}}
                    @disabled={{cannot-write @resource}}
                    class="w-full form-input"
                />
            </InputGroup>

            <InputGroup @name={{t "device.fields.last-maintenance-date"}}>
                <DatePicker
                    @value={{@resource.last_maintenance_date}}
                    @onChange={{fn (mut @resource.last_maintenance_date)}}
                    @placeholder={{t "device.fields.last-maintenance-date-placeholder"}}
                    @disabled={{cannot-write @resource}}
                    class="w-full form-input"
                />
            </InputGroup>
        </div>
    </ContentPanel>

    <ContentPanel @title="Warranty & Status" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
            <InputGroup @name={{t "device.fields.status"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{get-fleet-ops-options "deviceStatuses"}}
                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "deviceStatuses")}}
                        @onChange={{set-model-attr @resource "status"}}
                        @placeholder={{t "common.select-field" field=(t "common.status")}}
                        @triggerClass="form-select form-input"
                        @disabled={{cannot-write @resource}}
                        as |option|
                    >
                        <div class="text-sm">
                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
                            <div class="hide-from-trigger">{{option.description}}</div>
                        </div>
                    </PowerSelect>
                </div>
            </InputGroup>

            <InputGroup @name={{t "device.fields.warranty"}}>
                <ModelSelect
                    @modelName="warranty"
                    @selectedModel={{@resource.warranty}}
                    @placeholder={{t "device.fields.warranty-placeholder"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @resource.warranty)}}
                    @onChangeId={{fn (mut @resource.warranty_uuid)}}
                    @disabled={{cannot-write @resource}}
                    as |model|
                >
                    {{model.policy_number}}
                    -
                    {{model.provider}}
                </ModelSelect>
            </InputGroup>
        </div>
    </ContentPanel>

    <ContentPanel @title="Notes" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 gap-2 no-input-group-padding text-xs">
            <InputGroup @name={{t "device.fields.notes"}} @wrapperClass="col-span-2">
                <Textarea
                    @value={{@resource.notes}}
                    aria-label={{t "device.fields.notes"}}
                    class="w-full form-input"
                    disabled={{cannot-write @resource}}
                    placeholder={{t "device.fields.notes-placeholder"}}
                    rows={{4}}
                />
            </InputGroup>
        </div>
    </ContentPanel>

    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />

    <RegistryYield @registry="fleet-ops:component:device:form" as |RegistryComponent|>
        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
    </RegistryYield>
</div>
