<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <InputGroup @name="Assign Food Truck Vehicle">
            <ModelSelect
                @modelName="vehicle"
                @selectedModel={{@options.foodTruck.vehicle}}
                @placeholder="Assign Food Truck Vehicle"
                @triggerClass="form-select form-input"
                @infiniteScroll={{false}}
                @renderInPlace={{true}}
                @onChange={{fn (mut @options.foodTruck.vehicle)}}
                as |model|
            >
                <div class="flex flex-row">
                    <div class="mr-2">
                        <Image src={{model.photo_url}} class="w-10 h-10 rounded-md shadow-sm" />
                    </div>
                    <div class="flex flex-col flex-1">
                        <div class="font-semibold">{{model.display_name}}</div>
                        <div>{{model.plate_number}}</div>
                    </div>
                </div>
            </ModelSelect>
        </InputGroup>
        <InputGroup @name="Service Area">
            <ModelSelect
                @modelName="service-area"
                @selectedModel={{@options.foodTruck.service_area}}
                @placeholder="Assign Food Truck to Service Area"
                @triggerClass="form-select form-input"
                @infiniteScroll={{false}}
                @renderInPlace={{true}}
                @onChange={{fn (mut @options.foodTruck.service_area)}}
                @allowClear={{true}}
                as |model|
            >
                {{model.name}}
            </ModelSelect>
        </InputGroup>
        {{#if @options.foodTruck.service_area}}
            <InputGroup @name="Zone">
                <ModelSelect
                    @modelName="zone"
                    @selectedModel={{@options.foodTruck.zone}}
                    @query={{hash service_area_uuid=@options.foodTruck.service_area.id}}
                    @placeholder="Assign Food Truck to Zone"
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut @options.foodTruck.zone)}}
                    @allowClear={{true}}
                    as |model|
                >
                    {{model.name}}
                </ModelSelect>
            </InputGroup>
        {{/if}}
        <InputGroup @name="Food Truck Status">
            <Select
                class="w-full"
                @value={{@options.foodTruck.status}}
                @placeholder="Select food truck status"
                @options={{@options.statusOptions}}
                @onSelect={{fn (mut @options.foodTruck.status)}}
                @humanize={{true}}
            />
        </InputGroup>
    </div>
</Modal::Default>