window.addEventListener('load', function() {
  const iframe = document.createElement('iframe');
  iframe.style.position = 'fixed';
  iframe.style.bottom = '20px';
  iframe.style.right = '20px';
  iframe.style.zIndex = 3;
  iframe.style.width = '400px';
  iframe.style.height = '134px';
  iframe.style.boxShadow = '0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)';
  iframe.frameBorder = 0;

  const body = document.getElementsByTagName('body')[0];
  body.appendChild(iframe);

  const notificationWrapper = document.createElement('div');
  notificationWrapper.className = "p-5 shadow rounded flex h-full";

  notificationWrapper.style.backgroundColor = '#fff';

  const textContent = document.createElement('div'); 
  textContent.innerHTML = '<div><span class="text-xl font-medium">Stay informed.</span><br /><span class="text-xl font-light">Search Ohio\'s public notices.</span></div>';

  const searchButtonWrapper = document.createElement('div');
  searchButtonWrapper.className = 'flex items-center ml-10 w-40';
  const searchButton = document.createElement('a');
  searchButton.setAttribute('target', '_blank');
  searchButton.setAttribute('rel', 'noopener noreferrer');
  searchButton.href = "https://ohio.column.us/search/";
  searchButton.innerText = "Search";
  searchButton.className = "p-5 py-2 px-4 text-white rounded";    
  searchButton.style.backgroundColor = "#2F80ED";
  searchButtonWrapper.appendChild(searchButton);

  
    const secondaryButton = document.createElement('a');
    secondaryButton.setAttribute('target', '_blank');
    secondaryButton.setAttribute('rel', 'noopener noreferrer');
    secondaryButton.href = "https://ohio.column.us/search/?alerts=true";
    secondaryButton.innerText = "Get Alerts";
    secondaryButton.className = "p-5 py-2 px-4 text-white rounded flex-1 text-center";
    secondaryButton.style.color = "#2F80ED";
    searchButtonWrapper.appendChild(secondaryButton);

    notificationWrapper.className += ' flex-col';

    searchButtonWrapper.className = searchButtonWrapper.className.replace(' ml-10', '') + ' w-full text-center mt-1';

    searchButton.className += ' flex-1';

  notificationWrapper.appendChild(textContent);
  notificationWrapper.appendChild(searchButtonWrapper);

  iframe.contentWindow.document.open('text/htmlreplace');
  iframe.contentWindow.document.write(
    notificationWrapper.outerHTML
  );
  iframe.contentWindow.document.write(
    "<link rel='stylesheet' href='https://florida-search-widgets.column.us/tailwind.css'>"
  );
  iframe.contentWindow.document.close();
});