<Modal
    class="flb--default-modal {{@modalClass}} {{@options.modalClass}}"
    @modalIsOpened={{@modalIsOpened}}
    @modalId={{@modalId}}
    @zIndex={{this.modalZIndex}}
    @onClose={{@decline}}
    @onSubmit={{@confirm}}
    @onOpen={{@onOpen}}
    @options={{@options}}
    ...attributes
    as |modal|
>
    <modal.header class={{@options.modalHeaderClass}} @onClose={{modal.close}} @closeButton={{if (eq @options.closeButton false) false true}}>
        {{#if @options.titleComponent}}
            {{component (lazy-engine-component @options.titleComponent) options=@options modal=modal}}
        {{else}}
            {{#unless @options.hideTitle}}
                <Modal::Header::Title class={{@options.modalHeaderTitleClass}}>
                    {{@options.title}}
                </Modal::Header::Title>
            {{/unless}}
        {{/if}}
    </modal.header>
    <modal.body class={{@options.modalBodyClass}}>
        {{#if @options.bodyComponent}}
            {{component (lazy-engine-component @options.bodyComponent) options=@options modal=modal}}
        {{else}}
            {{yield @options modal}}
        {{/if}}
    </modal.body>
    <modal.footer class={{@options.modalFooterClass}}>
        {{#if @options.footerComponent}}
            {{component (lazy-engine-component @options.footerComponent) options=@options confirm=modal.submit modal=modal}}
        {{else}}
            {{#unless @options.hideFooterActions}}
                <div class="modal-footer-actions space-x-2 {{@options.modalFooterActionsClass}}">
                    <Button
                        class="{{if @options.hideDeclineButton 'hidden'}}"
                        @type={{or @options.declineButtonScheme @options.declineButtonType "default"}}
                        @size={{or @options.buttonSize "md"}}
                        @icon={{or @options.declineButtonIcon "times"}}
                        @iconPrefix={{@options.declineButtonIconPrefix}}
                        @text={{or @options.declineButtonText "Cancel"}}
                        @onClick={{modal.close}}
                        @disabled={{or @options.declineButtonDisabled @options.isLoading}}
                    />
                    {{#each @options.actionButtons as |actionButton|}}
                        {{#if actionButton.items}}
                            <DropdownButton
                                @text={{or actionButton.text actionButton.label}}
                                @textClass={{actionButton.textClass}}
                                @type={{actionButton.type}}
                                @icon={{or actionButton.icon "ellipsis"}}
                                @size={{or actionButton.size "md"}}
                                @iconPrefix={{actionButton.prefix}}
                                @triggerClass={{actionButton.triggerClass}}
                                @renderInPlace={{or actionButton.renderInPlace true}}
                                as |dd|
                            >
                                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                                    {{#each actionButton.items as |item|}}
                                        {{#if item.separator}}
                                            <div class="next-dd-menu-seperator"></div>
                                        {{else}}
                                            <div class="px-1 {{item.wrapperClass}}">
                                                <a
                                                    href="javascript:;"
                                                    class="next-dd-item {{item.class}} {{if item.disabled 'disabled'}}"
                                                    disabled={{item.disabled}}
                                                    {{on "click" (dropdown-fn dd (or item.fn item.onClick))}}
                                                >
                                                    {{#if item.icon}}
                                                        <div class="w-7 flex-grow-0 flex-shrink-0">
                                                            <FaIcon @icon={{item.icon}} />
                                                        </div>
                                                    {{/if}}
                                                    <span>{{or item.text item.label}}</span>
                                                </a>
                                            </div>
                                        {{/if}}
                                    {{/each}}
                                </div>
                            </DropdownButton>
                        {{else if actionButton.component}}
                            {{component
                                actionButton.component
                                icon=actionButton.icon
                                iconPrefix=actionButton.iconPrefix
                                iconComponent=actionButton.iconComponent
                                size=(or actionButton.size "md")
                                text=actionButton.text
                                options=actionButton.options
                                items=actionButton.items
                                permission=actionButton.permission
                                isLoading=actionButton.isLoading
                                renderInPlace=actionButton.renderInPlace
                                triggerClass=actionButton.triggerClass
                                disabled=actionButton.disabled
                                onClick=actionButton.onClick
                                fn=actionButton.fn
                                perform=actionButton.perform
                                onSelect=actionButton.onSelect
                                onChange=actionButton.onChange
                            }}
                        {{else}}
                            <Button
                                @type={{actionButton.type}}
                                @text={{actionButton.text}}
                                @onClick={{if actionButton.perform (perform actionButton.perform) (or actionButton.onClick actionButton.fn)}}
                                @size={{or actionButton.size "md"}}
                                @buttonType={{actionButton.buttonType}}
                                @disabled={{actionButton.disabled}}
                                @exampleText={{actionButton.exampleText}}
                                @helpText={{actionButton.helpText}}
                                @icon={{actionButton.icon}}
                                @iconClass={{actionButton.iconClass}}
                                @iconFlip={{actionButton.iconFlip}}
                                @iconPrefix={{actionButton.iconPrefix}}
                                @iconRotation={{actionButton.iconRotation}}
                                @iconSize={{actionButton.iconSize}}
                                @isLoading={{actionButton.isLoading}}
                                @outline={{actionButton.outline}}
                                @permission={{actionButton.permission}}
                                @wrapperClass={{actionButton.wrapperClass}}
                                @textClass={{actionButton.textClass}}
                                @tooltipPlacement={{actionButton.tooltipPlacement}}
                                @visible={{actionButton.visible}}
                            />
                        {{/if}}
                    {{/each}}
                    <Button
                        class="{{if @options.hideAcceptButton 'hidden'}}"
                        @type={{or @options.acceptButtonScheme @options.acceptButtonType "primary"}}
                        @size={{or @options.buttonSize "md"}}
                        @icon={{or @options.acceptButtonIcon "check"}}
                        @iconPrefix={{@options.acceptButtonIconPrefix}}
                        @isLoading={{@options.isLoading}}
                        @text={{or @options.acceptButtonText "Confirm"}}
                        @onClick={{modal.submit}}
                        @disabled={{or @options.acceptButtonDisabled @options.isLoading}}
                    />
                </div>
            {{/unless}}
        {{/if}}
    </modal.footer>
</Modal>