<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="px-4 text-gray-900 dark:text-gray-50">
        <div class="mb-1 text-base font-semibold">
            You are about to reset the password for
            {{this.customer.name}}
        </div>
        <div class="text-sm mb-4">Please enter the new password and confirm it below. You have the option to send the new credentials to the customer via email by selecting the checkbox.</div>
        <InputGroup>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <InputGroup @name="New Password" @type="password" @value={{this.password}} @wrapperClass="mb-0i" />
                <InputGroup @name="Confirm New Password" @type="password" @value={{this.confirmPassword}} @wrapperClass="mb-0i" />
            </div>
        </InputGroup>
        <InputGroup>
            <Checkbox @value={{this.sendCredentials}} @label="Send password credentials to customer" @onToggle={{fn (mut this.sendCredentials)}} @alignItems="center" @labelClass="mb-0i" />
        </InputGroup>
    </div>
</Modal::Default>