<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="flex">
            <div class="w-32 mb-6 mr-6">
                <Image src={{@options.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{@options.vehicle.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{@options.uploadNewPhoto}} class="w-32" />
            </div>
            <div class="flex-1 space-y-4">
                <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.common.internal-id"}}
                            </label>
                            <Input @value={{@options.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.common.plate-number"}}
                            </label>
                            <Input @value={{@options.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.plate-number"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.common.vin-number"}}
                            </label>
                            <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.vin-number"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.make"}}
                            </label>
                            <Input @value={{@options.vehicle.make}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.make"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.model"}}
                            </label>
                            <Input @value={{@options.vehicle.model}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.model"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.year"}}
                            </label>
                            <Input @value={{@options.vehicle.year}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.year"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.driver-assigned"}}
                            </label>
                            <ModelSelect @modelName="driver" @selectedModel={{@options.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.vehicle.driver)}} as |model|>
                                {{model.name}}
                            </ModelSelect>
                        </div>
                    </div>
                </ContentPanel>

                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.avatar"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                        <div class="input-group mb-2">
                            <InputLabel @labelText={{t "fleet-ops.component.modals.vehicle-form.map-avatar"}} @helpText={{t "fleet-ops.component.modals.vehicle-form.map-avatar-text"}} />
                            <FetchSelect @wrapperClass="w-60" @placeholder={{t "fleet-ops.component.modals.vehicle-form.select-avatar"}} @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
                                {{titleize (humanize option.key)}}
                            </FetchSelect>
                        </div>
                        <div>
                            <img alt={{@options.vehicle.public_id}} src={{@options.vehicle.avatar_url}} class="w-24 h-24" />
                        </div>
                    </div>
                </ContentPanel>

                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.model-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.acceleration"}}
                            </label>
                            <Input @value={{@options.vehicle.model_0_to_100_kph}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.acceleration"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.body"}}
                            </label>
                            <Input @value={{@options.vehicle.model_body}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.body"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.doors"}}
                            </label>
                            <Input @value={{@options.vehicle.model_doors}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.doors"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.common.driver"}}
                            </label>
                            <Input @value={{@options.vehicle.model_drive}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.type"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.length"}}
                            </label>
                            <Input @value={{@options.vehicle.model_length_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.length"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.seats"}}
                            </label>
                            <Input @value={{@options.vehicle.model_seats}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.seats"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.top-speed"}}
                            </label>
                            <Input @value={{@options.vehicle.model_top_speed_kph}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.top-speed"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.transmission"}}
                            </label>
                            <Input @value={{@options.vehicle.model_transmission_type}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.transmission"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.weight"}}
                            </label>
                            <Input @value={{@options.vehicle.model_weight_kg}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.weight"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.wheelbase"}}
                            </label>
                            <Input @value={{@options.vehicle.model_wheelbase_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.wheelbase"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.width"}}
                            </label>
                            <Input @value={{@options.vehicle.model_width_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.width"}} />
                        </div>
                    </div>
                </ContentPanel>

                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.engine-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.engine-bore"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_bore_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.engine-bore"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.cc"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_cc}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.cc"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.compression"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_compression}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.compression"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.cylinder"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_cyl}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.cylinder"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.position"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_position}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.position"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.power-ps"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_power_ps}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.power-ps"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.power-rpm"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_power_rpm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.power-rpm"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.stroke"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_stroke_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.stroke"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.torque-nm"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_torque_nm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.torque-nm"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.torque-rpm"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_torque_rpm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.torque-rpm"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.valves"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.valves"}} />
                        </div>
                    </div>
                </ContentPanel>

                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.fuel-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.fuel"}}
                            </label>
                            <Input @value={{@options.vehicle.model_engine_fuel}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.fuel-type"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.fuel-cap"}}
                            </label>
                            <Input @value={{@options.vehicle.model_fuel_cap_l}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.fuel-cap"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.liters-city"}}
                            </label>
                            <Input @value={{@options.vehicle.model_lkm_city}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.liters-city"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.liters-highway"}}
                            </label>
                            <Input @value={{@options.vehicle.model_lkm_hwy}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.liters-highway"}} />
                        </div>

                        <div class="input-group mb-2">
                            <label>
                                {{t "fleet-ops.component.modals.vehicle-details.liters-mixed"}}
                            </label>
                            <Input @value={{@options.vehicle.model_lkm_mixed}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.liters-mixed"}} />
                        </div>
                    </div>
                </ContentPanel>

            </div>
        </div>
    </div>
</Modal::Default>