<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
        <div class="flex flex-row items-center justify-between w-full mb-4">
            <div class="flex flex-1 space-x-2">
                {{#if this.driver.id}}
                    <Button @type="default" @icon="id-card" @helpText={{t "fleet-ops.component.driver-form-panel.driver-detail"}} @onClick={{this.onViewDetails}} />
                {{/if}}
            </div>
            <div class="flex flex-1 justify-end">
                <div class="mr-2">
                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id (t "fleet-ops.component.driver-form-panel.save-driver")(t "fleet-ops.component.driver-form-panel.create-driver") }} @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} />
                </div>
                <Button @type="default" @icon="times" @helpText={{if this.driver.id (t "fleet-ops.component.driver-form-panel.cancel-edit-driver")(t "fleet-ops.component.driver-form-panel.cancel-new-driver") }} @onClick={{this.onPressCancel}} />
            </div>
        </div>
        <div class="flex flex-row justify-between w-full">
            <div class="flex flex-col flex-1 w-3/4">
                <div class="flex flex-row">
                    <div class="w-14">
                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
                            <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                                <InputInfo @text={{t "fleet-ops.component.driver-form-panel.upload-new-photo"}} />
                            </Attach::Tooltip>
                            <div class="upload-avatar-button-wrapper rounded-lg">
                                <UploadButton @name={{t "fleet-ops.common.photos"}} @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <h1 class="text-gray-900 dark:text-white text-2xl">
                            {{#if this.driver.id}}
                                {{this.driver.name}}
                            {{else}}
                                {{#if this.driver.name}}
                                    {{this.driver.name}}
                                {{else}}
                                    <span>{{t "fleet-ops.component.driver-form-panel.new-driver"}}</span>
                                {{/if}}
                            {{/if}}
                        </h1>
                        <div class="-mt-1">
                            {{#if this.driver.vehicle}}
                                <div class="flex flex-row items-center">
                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.driver.vehicle.displayName}}</span>
                                </div>
                            {{else}}
                                <div class="flex flex-row items-center">
                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.driver-panel.no-vehicle-message"}}</span>
                                </div>
                            {{/if}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end w-1/4">
                <Badge @status={{if this.driver.online "online" "offline"}}>{{if this.driver.online "Online" "Offline"}}</Badge>
            </div>
        </div>
    </Overlay::Header>

    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
        <div class="flex-1 space-y-4">
            <ContentPanel @title={{t "fleet-ops.component.driver-form-panel.user-account"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.userAccountActionButtons}}>
                <div class="mb-4">
                    <InputGroup @name={{t "fleet-ops.component.driver-form-panel.user-account"}} @helpText={{t "fleet-ops.component.driver-form-panel.user-account-help-text"}}>
                        <ModelSelect @modelName="user" @selectedModel={{this.driver.user}} @placeholder="Select User" @query={{hash doesnt_have_driver=true}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.user)}} as |model|>
                            <div class="flex flex-row">
                                <div class="mr-2 w-6">
                                    <Image src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.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">{{n-a model.phone}}</div>
                                </div>
                            </div>
                        </ModelSelect>
                    </InputGroup>
                </div>
                {{#if this.driver.user}}
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                        <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
                            <Input @value={{this.driver.user.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} disabled={{true}} />
                        </InputGroup>

                        <InputGroup @name={{t "fleet-ops.common.email"}} @wrapperClass="mb-0i">
                            <Input @value={{this.driver.user.email}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} disabled={{true}} />
                        </InputGroup>

                        <InputGroup @name={{t "fleet-ops.common.phone"}} @wrapperClass="mb-0i">
                            <PhoneInput @value={{this.driver.user.phone}} @onInput={{fn (mut this.driver.phone)}} class="form-input w-full" disabled={{true}} />
                        </InputGroup>
                    </div>
                {{/if}}
            </ContentPanel>

            <ContentPanel @title={{t "fleet-ops.component.driver-form-panel.driver-details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                    <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
                        <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.common.driver-license"}}>
                        <Input @value={{this.driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.driver-license"}} />
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.component.driver-form-panel.vendor"}}>
                        <ModelSelect @modelName="vendor" @selectedModel={{this.driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vendor)}} as |model|>
                            {{model.name}}
                        </ModelSelect>
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
                        <ModelSelect @modelName="vehicle" @selectedModel={{this.driver.vehicle}} @placeholder={{t "fleet-ops.component.driver-form-panel.select-vehicle"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vehicle)}} as |model|>
                            {{model.display_name}}
                        </ModelSelect>
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.common.city"}}>
                        <Input @value={{this.driver.city}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.city"}} />
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.common.country"}}>
                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.driver.country}} @onChange={{fn (mut this.driver.country)}} placeholder={{t "fleet-ops.common.country"}} />
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.common.status"}}>
                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                            <PowerSelect @options={{this.driverStatusOptions}} @selected={{this.driver.status}} @onChange={{fn (mut this.driver.status)}} @placeholder={{t "fleet-ops.common.status"}} @triggerClass="form-select form-input" as |status|>
                                {{smart-humanize status}}
                            </PowerSelect>
                        </div>
                    </InputGroup>
                    <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
                        <CoordinatesInput @value={{this.driver.location}} @onChange={{this.onCoordinatesChanged}} @onGeocode={{this.onAutocomplete}} @onUpdatedFromMap={{this.onCoordinatesChanged}} @onInit={{this.setCoordinatesInput}} @renderInPlace={{false}} />
                    </InputGroup>
                </div>
            </ContentPanel>

            <ContentPanel @title={{t "fleet-ops.component.avatar-picker.avatar"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <AvatarPicker @model={{this.driver}} @defaultAvatar={{config "defaultValues.driverAvatar"}} />
            </ContentPanel>
        </div>

        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>