<div class="form-wrapper" ...attributes>
    <ContentPanel @title={{t "driver.fields.user-account"}} @open={{true}} @actionButtons={{this.userAccountActionButtons}} @wrapperClass="bordered-top">
        <div class="space-y-2">
            <InputGroup @name={{t "driver.fields.user-account"}} @helpText={{t "driver.fields.user-account-help-text"}}>
                <ModelSelect
                    @modelName="user"
                    @selectedModel={{@resource.user}}
                    @placeholder={{t "driver.fields.select-user"}}
                    @query={{hash doesnt_have_driver=true can_be_driver=true}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @resource.user)}}
                    @permission="fleet-ops update-user-for driver"
                    as |model|
                >
                    <div class="flex flex-row">
                        <div class="mr-2 w-6">
                            <Image src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{model.name}} class="w-6 h-6 rounded-md" />
                        </div>
                        <div class="flex flex-col">
                            <div class="font-semibold">{{model.name}}</div>
                            <div class="text-xs flex flex-row items-center leading-4">
                                <FaIcon @icon="envelope" @size="sm" class="mr-1 opacity-75" />
                                <span>{{n-a model.email}}</span>
                            </div>
                            <div class="text-xs flex flex-row items-center leading-4">
                                <FaIcon @icon="phone" @size="sm" class="mr-1 opacity-75" />
                                <span>{{n-a model.phone}}</span>
                            </div>
                        </div>
                    </div>
                </ModelSelect>
            </InputGroup>
            {{#if @resource.user}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding">
                    <InputGroup @name={{t "common.name"}} @wrapperClass="col-span-2 mb-0i">
                        <Input @value={{@resource.user.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{true}} />
                    </InputGroup>
                    <InputGroup @name={{t "common.email"}} @wrapperClass="mb-0i">
                        <Input @value={{@resource.user.email}} @type="text" class="w-full form-input" placeholder={{t "common.email"}} disabled={{true}} />
                    </InputGroup>
                    <InputGroup @name={{t "common.phone"}} @wrapperClass="mb-0i">
                        <PhoneInput @value={{@resource.user.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{true}} />
                    </InputGroup>
                </div>
            {{/if}}
        </div>
    </ContentPanel>

    <ContentPanel @title={{t "driver.fields.driver-details"}} @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}}
                    @fallbackSrc={{config "defaultValues.driverImage"}}
                    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 lg:grid-cols-2 gap-2 text-xs no-input-group-padding">
            <InputGroup @name={{t "common.internal-id"}}>
                <Input @value={{@resource.internal_id}} @type="text" class="w-full form-input" placeholder={{t "common.internal-id"}} disabled={{cannot-write @resource}} />
            </InputGroup>

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

            <InputGroup @name={{t "driver.fields.license-expiry"}}>
                <DatePicker
                    @value={{@resource.license_expiry}}
                    @onChange={{fn (mut @resource.license_expiry)}}
                    @placeholder={{t "driver.fields.license-expiry"}}
                    @disabled={{cannot-write @resource}}
                    class="w-full form-input"
                />
            </InputGroup>

            <InputGroup @name={{t "driver.fields.vendor"}}>
                <ModelSelect
                    @modelName="vendor"
                    @selectedModel={{@resource.vendor}}
                    @placeholder={{t "driver.fields.select-vendor"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @resource.vendor)}}
                    @disabled={{cannot-write @resource}}
                    as |model|
                >
                    {{model.name}}
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "resource.vehicle"}}>
                <ModelSelect
                    @modelName="vehicle"
                    @selectedModel={{@resource.vehicle}}
                    @placeholder={{t "driver.fields.select-vehicle"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @resource.vehicle)}}
                    @onChangeId={{fn (mut @resource.vehicle_uuid)}}
                    @disabled={{cannot-write @resource}}
                    as |model|
                >
                    {{model.display_name}}
                </ModelSelect>
            </InputGroup>

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

            <InputGroup @name={{t "common.country"}}>
                <CountrySelect
                    class="w-full form-input form-select form-datalist"
                    @value={{@resource.country}}
                    @onChange={{fn (mut @resource.country)}}
                    disabled={{cannot-write @resource}}
                />
            </InputGroup>

            <InputGroup @name={{t "common.status"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{get-fleet-ops-options "driverStatuses"}}
                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "driverStatuses")}}
                        @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 |type|
                    >
                        <div class="text-sm">
                            <div class="font-semibold normalize-in-trigger">{{type.label}}</div>
                            <div class="hide-from-trigger">{{type.description}}</div>
                        </div>
                    </PowerSelect>
                </div>
            </InputGroup>
            <InputGroup @name={{t "common.coordinates"}} @wrapperClass="col-span-2">
                <ModelCoordinatesInput @model={{@resource}} @disabled={{cannot-write @resource}} @autocomplete="location" />
            </InputGroup>
        </div>
        <RegistryYield @registry="fleet-ops:component:driver:form:details" as |RegistryComponent|>
            <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
        </RegistryYield>
    </ContentPanel>

    {{! ORCHESTRATOR CONSTRAINTS }}
    <ContentPanel @title="Orchestrator Constraints" @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">
            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
                Skills & Certifications
            </div>
            <div class="col-span-1 lg:col-span-2">
                <InputGroup @name="Driver Skills" @helpText="Skills and certifications this driver holds (e.g. refrigerated, hazmat, forklift). Used by the Orchestrator for order matching.">
                    <MultiSelect
                        @options={{get-fleet-ops-options "driverSkills"}}
                        @selected={{@resource.skills}}
                        @onChange={{fn (mut @resource.skills)}}
                        @placeholder="Select skills…"
                        @triggerClass="form-select form-input"
                        @disabled={{cannot-write @resource}}
                        as |option|
                    >
                        {{option.label}}
                    </MultiSelect>
                </InputGroup>
            </div>
            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
                Route Limits
            </div>
            <div class="col-span-1 lg:col-span-2 text-xs text-gray-500 dark:text-gray-400 -mt-1">
                Hard caps applied by the Orchestrator when building a single route. These are separate from the driver's shift schedule, which controls availability windows.
            </div>
            <InputGroup
                @name="Max Driving Time (seconds)"
                @helpText="Maximum total driving time in seconds the Orchestrator may assign to this driver in a single route. Leave blank for no limit. Example: 28800 = 8 hours."
            >
                <Input @value={{@resource.max_travel_time}} @type="number" class="form-input w-full" placeholder="e.g. 28800 (8 h)" disabled={{cannot-write @resource}} />
            </InputGroup>
            <InputGroup
                @name="Max Distance (metres)"
                @helpText="Maximum total route distance in metres the Orchestrator may assign to this driver in a single route. Leave blank for no limit."
            >
                <Input @value={{@resource.max_distance}} @type="number" class="form-input w-full" placeholder="e.g. 150000 (150 km)" disabled={{cannot-write @resource}} />
            </InputGroup>
        </div>
    </ContentPanel>

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

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

    <ContentPanel @title={{t "avatar-picker.avatar"}} @open={{true}} @wrapperClass="bordered-top">
        <AvatarPicker @model={{@resource}} @defaultAvatar={{config "defaultValues.driverAvatar"}} />
    </ContentPanel>

    <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
    </ContentPanel>
</div>
