<!DOCTYPE html>
<html lang="en">
	<head>
		<%- include('../shared/head') %>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
			crossorigin="anonymous"
		/>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
			crossorigin="anonymous"
		></script>

		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<%- include('../shared/navbar')%>
		<div class="container-fluid m-3 p-2">
			<h1>Generate Problem Set</h1>
			<div id="gen" class="container-fluid m-2 p-1">
				<div class="align-items-center">
					<label class="form-label"> Number Of Problems</label>
					<input type="number" class="form-control my-3" v-model="number" />
					<button v-on:click="generate()" class="btn btn-outline-primary">
						Go
					</button>
				</div>
			</div>
		</div>
		<footer class="container-fluid text-center text-muted">
			<%- include('../shared/footer')%>
		</footer>
	</body>
	<script>
		const app = new Vue({
			el: '#gen',
			data: {
				number: 8,
			},
			methods: {
				generate() {
					console.log('happens');
					window.location.replace('/problem/create/' + this.number);
				},
			},
		});
	</script>
</html>
