<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="mb-4 rounded-md border border-blue-200 bg-blue-50 p-3 text-sm text-blue-900 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-100">
            <div class="mb-1 font-semibold">Create a company workspace</div>
            <div>Company accounts can add members while keeping orders, billing, documents, and support history attached to the same customer workspace.</div>
        </div>

        <div class="grid grid-cols-1 gap-3 text-xs lg:grid-cols-2">
            <InputGroup @name="Company Name" @value={{this.companyName}} @placeholder="Company name" @wrapperClass="mb-0i" />
            <InputGroup @name="Email" @type="email" @value={{this.companyEmail}} @placeholder="billing@example.com" @wrapperClass="mb-0i" />
            <InputGroup @name="Phone" @wrapperClass="mb-0i">
                <PhoneInput @value={{this.companyPhone}} @onInput={{fn (mut this.companyPhone)}} class="form-input w-full" />
            </InputGroup>
        </div>
    </div>
</Modal::Default>
