<!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>
		<!--Katex-->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css"
			integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs"
			crossorigin="anonymous"
		/>
		<script
			src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js"
			integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx"
			crossorigin="anonymous"
		></script>

		<script src="/static/latex_utils.js"></script>
	</head>
	<body>
		<%- include('../shared/navbar')%>
		<div class="container m-3 p-2">
			<%if (locals.success) {%>
			<p class="text-success">
				Successfully created at
				<a href="/problem/<%=uuid%>"> /problem/<%=uuid%></a>
			</p>
			<%}%>

			<form id="create" action="#" method="post">
				<h1>
					<input
						type="text"
						v-model="name"
						class="form-control"
						placeholder="name"
						name="name"
					/>
				</h1>
				<label class="form-label" for="showtext"> Show Problem Text? </label>
				<input name="showtext" type="checkbox" v-model="showText" />

				<input type="hidden" name="_csrf" value="<%=csrfToken%>" />
				<input type="hidden" name="number" value="<%=number%>" />
				<p class="text-danger" v-if="!valid">
					*All answer fields must either have a capital letter between A and E
					or be an integer.
				</p>

				<br />
				<div class="m-2 p-1" v-for="i in problemnums" :key="i">
					<h2>Problem {{ i + 1 }}</h2>
					<label class="form-label"> Problem Statement </label> <br />
					<div class="row row-cols-2" v-if="showText">
						<textarea
							v-model="statements[i]"
							class="form-text col-5"
							rows="10"
							v-bind:name="'statement_' + i"
						></textarea>
						<div class="col-7" v-html="latex[i]"></div>
					</div>
					<input
						type="hidden"
						v-if="!showText"
						v-model="statements[i]"
						v-bind:name="'statement_' + i"
					/>
					<br />
					<label class="form-label"> Answer </label> <br />
					<input
						type="text"
						v-model="answers[i]"
						class="form-text"
						v-bind:name="'answer_' + i"
					/>
					<br />
				</div>
				<button class="mx-3 btn btn-outline-primary my-1" v-if="valid">
					<%if (locals.statements) {%> Save <%}else{%> Create <%}%>
				</button>
			</form>
		</div>
		<footer class="container-fluid text-center text-muted">
			<%- include('../shared/footer')%>
		</footer>
	</body>

	<script>
		const number = <%= number %>;
		const answerre = /^\s*([A-E]|[0-9]+)\s*$/
		const app = new Vue({
			el: "#create",
			data: {
				statements: <%- JSON.stringify(locals.statements || Array.from({length: number}).fill("")) %>,
				answers: <%- JSON.stringify(locals.answers || Array.from({length: number}).fill("")) %>,
				problemnums: Array(number).fill(0).map((_, i) => i),
				name: "<%= locals.name || '' %>",
				showText: false
			},
			computed: {
				latex: function () {
					if (!this.statements) {
						return Array.from({length: number}).fill("");
					} else {
						return this.statements.map(x => render(x))
					}
				},
				valid: function() {
					return this.answers.every(x => answerre.test(x)) && (this.name.replace(/\s+/, '').length != 0)
				}
			}
		});
	</script>
</html>
