<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Feedsync - Database Error</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="./core/install/install.css">
</head>
<body>
	<div class="wrap">
		<div class="container">
		<div class="error-message">
			<?php echo $message; ?>
		</div>
		<div class="control-buttons">
			<input type="button" value="Try Again" class="button try-again-trigger" />
			<a type="button" href="?try_again=1" class="button try-again">Wipe current configurations & proceed</a>
		</div>
		<div class="warning-message">
			Warning: This will wipe the current config file. Please type 'I have a backup' to proceed.
			<div class="field-wrap">
				<input type="text" id="backup-confirmation" class="form-control" placeholder="Type here...">
			</div>
			<div>
				<input type="button" value="Confirm" class="button confirm-trigger" />
			</div>
		</div>
		</div>
	</div>
	<script>
		document.querySelector('.try-again-trigger').addEventListener('click', function() {
			document.querySelector('.warning-message').style.display = 'block';
		});

		document.querySelector('.confirm-trigger').addEventListener('click', function() {
			var userInput = document.getElementById('backup-confirmation').value;
			if (userInput === 'I have a backup') {
				document.querySelector('.try-again').style.display = 'inline-block';
				document.querySelector('.try-again-trigger').style.display = 'none';
				document.querySelector('.warning-message').style.display = 'none';
			} else {
				alert("You must type 'I have a backup' to proceed.");
			}
		});
	</script>
	</body>
</html>