<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="input-group">
            <InputLabel @labelText={{t "fleet-ops.component.modals.zone-form.name"}} @helpText={{t "fleet-ops.component.modals.zone-form.name-text"}} @required={{true}} />
            <Input @value={{@options.zone.name}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.zone-form.name"}} />
        </div>

        <InputGroup @type="color" @value={{@options.zone.stroke_color}} @name={{t "fleet-ops.component.modals.zone-form.border-color"}} @helpText={{t "fleet-ops.component.modals.zone-form.customize-border"}} class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
        <InputGroup @type="color" @value={{@options.zone.color}} @name={{t "fleet-ops.component.modals.zone-form.zone-color"}} @helpText={{t "fleet-ops.component.modals.zone-form.customize-fill-color"}} class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />

        <div class="input-group">
            <InputLabel @labelText={{t "fleet-ops.component.modals.zone-form.name"}} @helpText={{t "fleet-ops.component.modals.zone-form.optionally"}} />
            <Textarea @value={{@options.zone.description}} rows={{3}} type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.zone-form.description-zone"}} />
        </div>
    </div>
</Modal::Default>