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) {
		const notification = document.createElement('div');
		notification.style.padding = '2rem 2rem 1rem 2rem';
		notification.style.backgroundColor = 'white';
		notification.style.textAlign = 'center';
		notification.style.boxShadow = '0px 5px 10px rgba(0, 0, 0, .15)';
		notification.style.border = '1px solid #efefef';
		notification.id = DISMISS_NOTIFICATION_ID;

		notification.innerHTML = '<p class="wiai-german">Du nutzt Safari und stellst Probleme beim Abspielen von Videos fest? '
			+ 'Schau in unsere <a href="https://vc.uni-bamberg.de/mod/page/view.php?id=1122808">FAQs</a>. ' 
			+ '<a href="javascript:dismissNotification();">(Verbergen)</a></p>'
			+ '<p class="wiai-english">You are using Safari and encounter problems when playing videos? '
			+ 'Have a look at our <a href="https://vc.uni-bamberg.de/course/view.php?id=45687#">FAQ</a>. '
			+ '<a href="javascript:dismissNotification();">(Dismiss)</a></p>';

		

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