<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="sm:flex sm:items-start">
            <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                <svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                    >
                    </path>
                </svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <div class="mb-4">
                    <p class="text-sm leading-5 text-gray-500 dark:text-white">
                        {{t "storefront.component.modals.assign-driver.message-driver"}}
                    </p>
                </div>
                <InputGroup class="mt-4" @name={{t "storefront.component.modals.assign-driver.name-driver"}}>
                    <ModelSelect
                        @modelName="driver"
                        @selectedModel={{@options.order.driver_assigned}}
                        @placeholder={{t "storefront.component.modals.assign-driver.placeholder-driver"}}
                        @triggerClass="form-select form-input"
                        @infiniteScroll={{false}}
                        @renderInPlace={{true}}
                        @onChange={{fn (mut @options.order.driver_assigned)}}
                        as |model|
                    >
                        {{model.name}}
                    </ModelSelect>
                </InputGroup>
            </div>
        </div>
    </div>
</Modal::Default>