@props(['integration', 'officialAddress'])

<!-- Modal for {{ $integration['name'] }} -->
<dialog id="dialog-{{ $integration['slug'] }}" aria-labelledby="dialog-title-{{ $integration['slug'] }}"
    class="fixed inset-0 m-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent p-0 backdrop:bg-transparent">
    <el-dialog-backdrop
        class="fixed inset-0 bg-gray-500/75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in">
    </el-dialog-backdrop>

    <div tabindex="0"
        class="flex min-h-full items-end justify-center p-4 text-center focus:outline focus:outline-0 sm:items-center sm:p-0">
        <el-dialog-panel
            class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95">

            @include($integration['modal_partial'], [
            'integration' => $integration,
            'officialAddress' => $officialAddress
            ])

        </el-dialog-panel>
    </div>
</dialog>