<div class="tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center tw-p-5
     tw-overflow-y-auto tw-modal tw-z-1031">
    <div onclick="event.stopPropagation();
            this.parentNode.remove();
            {if empty($chartID) === false}ui.charts.removeByID('{$chartID}');{/if}" class="tw-modal-close-btn tw-fixed tw-inset-0 tw-h-full tw-w-full tw-bg-gray-400/50
    tw-backdrop-blur-[32px]"></div>
    <div class="tw-relative tw-w-full tw-max-w-[{$modalWidth|default:'600px'}] tw-max-h-9/10
    tw-flex tw-flex-col tw-overflow-hidden tw-rounded-3xl tw-bg-white tw-p-6 tw-dark:bg-gray-900 tw-lg:p-10">
        <!-- close btn -->
        <button onclick="event.stopPropagation();
                this.parentNode.parentNode.remove();
                {if empty($chartID) === false}ui.charts.removeByID('{$chartID}');{/if}"
                class="tw-absolute tw-right-3 tw-top-3 tw-z-999 tw-flex tw-h-9.5 tw-w-9.5 tw-items-center
                tw-justify-center tw-rounded-full tw-bg-gray-100 tw-text-gray-400 tw-transition-colors
                tw-hover:bg-gray-200 tw-hover:text-gray-700 tw-dark:bg-gray-800 tw-dark:text-gray-400
                tw-dark:hover:bg-gray-700 tw-dark:hover:text-white tw-sm:right-6 tw-sm:top-6 tw-sm:h-11
                tw-sm:w-11">
            <svg class="tw-fill-current"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z"
                      fill=""
                />
            </svg>
        </button>
        <div class="tw-flex tw-flex-col tw-overflow-hidden tw-flex-1">
            <h4 class="tw-font-semibold tw-text-gray-800 tw-mb-7 tw-text-title-sm tw-dark:text-white/90">
                {$modalTitle}
            </h4>
            {$modalContent}
            <div class="tw-flex tw-items-center tw-justify-end tw-w-full tw-gap-3 tw-mt-8">
                {if empty($saveButton) === false}
                    <button type="button"
                            onclick="event.stopPropagation();
                            this.parentNode.parentNode.parentNode.parentNode.remove();
                            {if empty($chartID) === false}ui.charts.removeByID('{$chartID}');{/if}"
                            class="tw-flex tw-w-full tw-justify-center tw-rounded-lg tw-border
                            tw-border-gray-300 tw-bg-white tw-px-4 tw-py-3 tw-text-sm tw-font-medium
                            tw-text-gray-700 tw-shadow-theme-xs tw-hover:bg-gray-50 tw-hover:text-gray-800
                            tw-dark:border-gray-700 tw-dark:bg-gray-800 tw-dark:text-gray-400
                            tw-dark:hover:bg-white/[0.03] tw-dark:hover:text-gray-200 tw-sm:w-auto">
                        {__('Close')}
                    </button>
                {/if}
                {if empty($saveButton) === false}
                    <button type="button"
                            onclick="event.stopPropagation();
                                    this.parentNode.parentNode.parentNode.parentNode.remove();
                                    {if empty($chartID) === false}ui.charts.removeByID('{$chartID}');{/if}"
                            class="tw-flex tw-justify-center tw-w-full tw-px-4 tw-py-3 tw-text-sm
                            tw-font-medium tw-text-white tw-rounded-lg tw-bg-brand-500 tw-shadow-theme-xs
                            tw-hover:bg-brand-600 tw-sm:w-auto">
                        {__('Save Changes')}
                    </button>
                {/if}
            </div>
        </div>
    </div>
</div>
