(function() {
  const create = (selector) => {
    const element = document.createElement("div")
    element.id = selector
    document.body.append(element)
    return element
  }

  const selector = "external-domain-warning"
  const selectorContainer = `${selector}-container`

  // if the container does not exist in the DOM, it creates a new one, otherwise, replace the content
  const externalDomainWarning = document.getElementById(selectorContainer) || create(selectorContainer)

  externalDomainWarning.innerHTML = ''
  externalDomainWarning.innerHTML = '<%= j(render partial: "modal").strip.html_safe %>'

  new window.Decidim.Dialogs(`#${selector}`, {
    closingSelector: `[data-dialog-close="${selector}"]`,
    backdropSelector: `[data-dialog="${selector}"]`,
    labelledby: `dialog-title-${selector}`,
    describedby: `dialog-desc-${selector}`
  }).open()
})()