const DISMISS_STORAGE_KEY = 'wiai-safari-warning-dismissed';
const DISMISS_NOTIFICATION_ID = 'wiai-safari-warning';

function dismissNotification(notification) {
        window.localStorage.setItem(DISMISS_STORAGE_KEY, 1);
        document.getElementById(DISMISS_NOTIFICATION_ID).style.display = 'none';
}

window.addEventListener('load', function () {
	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
	const dismissed = window.localStorage && window.localStorage.getItem(DISMISS_STORAGE_KEY) == 1;
	if (isSafari && !dismissed || localStorage.getItem('wiai-debug')) {
		const notification = document.createElement('div');
		notification.id = DISMISS_NOTIFICATION_ID;

		notification.innerHTML = `
<div style="background: white; border: 1px solid lightgray; padding: 2rem; box-shadow: 0 5px 12px -6px rgba(0,0,0,.3);">
    <strong>Hinweis für alle Safari-Nutzer:innen:</strong> 
    Wenn beim Aufruf von Videos, die in Panopto zur Verfügung stehen, immer wieder die Anmelde-Seite (Shibboleth) erscheint, dann überprüft bitte 
die Cookie-Einstellungen eures Safari-Browsers, wie in der <a href="https://support.panopto.com/s/article/How-to-Enable-Third-Party-Cookies-in-Supported-Browsers" 
target="_blank">Anleitung von Panopto</a> beschrieben. Die Nutzung eines anderer Browsers könnte das Problem auch lösen, z. B. Google Chrome oder Mozilla Firefox. 
Wendet euch bei Problemen an den Technik-Support über die rote Sprechblase unten rechts.
  <a href="javascript:dismissNotification();">(Verbergen)</a>
</div>
`;		

		document.querySelector('#section-0 .section').appendChild(notification);
	}
});