<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="mb-4 border border-gray-700 shadow-sm rounded-md pt-2 px-4">
            <InputGroup @name={{t "fleet-ops.component.modals.map-layer-form.layer-type"}} @helpText={{t "fleet-ops.component.modals.map-layer-form.layer-type-text"}}>
                <Select @options={{@options.layerTypes}} @value={{@options.selectedLayerType}} @onSelect={{fn (mut @options.selectedLayerType)}} @placeholder={{t "fleet-ops.component.modals.map-layer-form.select-layer-type"}} class="w-full" />
            </InputGroup>
        </div>
        {{#if (eq @options.selectedLayerType "Zone")}}
            <InputGroup @name={{t "fleet-ops.component.modals.map-layer-form.service-area"}} @helpText={{t "fleet-ops.component.modals.map-layer-form.service-area-text"}}>
                <ModelSelect @modelName="service-area" @selectedModel={{@options.layerOptions.service_area}} @placeholder={{t "fleet-ops.component.modals.map-layer-form.select-service-area"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.layerOptions.service_area)}} as |model|>
                    {{model.name}}
                </ModelSelect>
            </InputGroup>
        {{/if}}
        <InputGroup @value={{@options.layerOptions.name}} @name="{{@options.selectedLayerType}} Name" @helpText={{t "fleet-ops.component.modals.map-layer-form.set-name" htmlSafe=true options=@options.selectedLayerType}} @required={{true}} />
        {{#if (eq @options.selectedLayerType "Service Area")}}
            <InputGroup @name={{t "fleet-ops.component.modals.map-layer-form.service-type"}} @helpText={{t "fleet-ops.component.modals.map-layer-form.service-type-text"}}>
                <Select @options={{@options.serviceAreaTypes}} @value={{@options.layerOptions.type}} @onSelect={{fn (mut @options.layerOptions.type)}} @placeholder={{t "fleet-ops.component.modals.map-layer-form.select-service-type"}} class="w-full" />
            </InputGroup>
        {{/if}}
        <InputGroup @type="color" @value={{@options.layerOptions.stroke_color}} @name="{{@options.selectedLayerType}} Border Color" @helpText={{t "fleet-ops.component.modals.map-layer-form.customize-border" htmlSafe=true options=@options.selectedLayerType}} class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
        <InputGroup @type="color" @value={{@options.layerOptions.color}} @name="{{@options.selectedLayerType}} Color" @helpText={{t "fleet-ops.component.modals.map-layer-form.customize-fill-color" htmlSafe=true options=@options.selectedLayerType}} class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
        {{#if (eq @options.selectedLayerType "Service Area")}}
            <InputGroup @name={{t "fleet-ops.component.modals.map-layer-form.service-area-country"}} @helpText={{t "fleet-ops.component.modals.map-layer-form.service-area-country-text"}}>
                <CountrySelect class="w-full form-input" @value={{@options.layerOptions.country}} @onChange={{fn (mut @options.layerOptions.country)}} />
            </InputGroup>
        {{/if}}
    </div>
</Modal::Default>