<div
    class="sw-modals-renderer"
    style="display: none;"
>
    <template
        v-for="modal in modals"
        :key="modal.locationId"
    >
        <sw-modal
            :title="$tc(modal.title ?? '')"
            :closable="modal.closable"
            :show-header="modal.showHeader"
            :show-footer="modal.showFooter"
            :variant="modal.variant"
            @modal-close="closeModal(modal.locationId)"
        >
            <sw-iframe-renderer
                :src="modal.baseUrl"
                :location-id="modal.locationId"
            />

            <template #modal-footer>
                <sw-button
                    v-for="button in modal.buttons"
                    :key="button.label"
                    :variant="buttonProps(button).variant"
                    :size="buttonProps(button).size"
                    :square="buttonProps(button).square"
                    @click="() => buttonProps(button).method()"
                >
                    {{ $tc(button.label ?? '') }}
                </sw-button>
            </template>
        </sw-modal>
    </template>
</div>
