<!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">
			<%if (admin) {%>
			<a href="/problem/create" class="btn btn-outline-primary my-2">
				Create a Problem Set
			</a>
			<%}%>
			<h1>Problem Sets</h1>

			<div id="dashboard" class="my-4">
				<h5 v-if="sets.length === 0">No Sets</h5>
				<h5 class="bg-light rounded-2 my-2 mx-1 p-3 row" v-for="set in sets">
					<a v-bind:href="'/problem/' + set._id" class="col-md-5 my-2">
						"{{ set.name }}"
						<span class="text-muted"> - by {{ set.by }}</span>
					</a>
					<div v-if="googleId === set.authorId" class="col-md-7">
						<a
							v-bind:href="'/dashboard/responses/' + set._id"
							class="btn btn-outline-dark col-3 text-decoration-none"
						>
							Responses
						</a>
						<a
							v-bind:href="'/problem/edit/' + set._id"
							class="btn btn-outline-dark col-3 text-decoration-none"
						>
							Edit
					</a>
						<a
							v-bind:href="'/problem/delete/' + set._id"
							class="btn btn-outline-danger col-3 text-decoration-none"
						>
							Delete
						</a>
					</span>
				</h5>
				<p v-if="error" class="text-danger">{{ JSON.stringify(error) }}</p>
				<p v-if="loading" class="text-muted">Loading ...</p>
				<div class="text-center">
				<button
					v-if="!loading && !end"
					@click="more()"
					class="btn btn-outline-primary my-2"
				>
					+
				</button>
				</div>
			</div>
		</div>
		<footer class="container-fluid text-center text-muted">
			<%- include('../shared/footer')%>
		</footer>
	</body>
	<script>
		const googleId = '<%= user.googleId %>';
		const app = new Vue({
			el: '#dashboard',
			data: {
				googleId,
				sets: [],
				last: null,
				error: null,
				loading: false,
				end: false,
			},
			mounted() {
				this.loading = true;
				fetch('/api/problem/recent').then((d) => {
					const status = d.status;
					d.json().then((res) => {
						if (status === 200) {
							this.sets = res;
							if (res.length === 0) {
								this.end = true;
								this.last = null;
							} else this.last = res.slice(-1)[0]._id;
						} else this.error = res.error;
						this.loading = false;
					});
				});
			},
			methods: {
				more() {
					this.loading = true;
					fetch('/api/problem/recent/' + this.last).then((d) => {
						const status = d.status;
						d.json().then((res) => {
							if (status === 200) {
								res.forEach((doc) => this.sets.push(doc));
								if (res.length === 0) {
									this.end = true;
									this.last = null;
								} else this.last = res.slice(-1)[0]._id;
							} else this.error = res.error;
							this.loading = false;
						});
					});
				},
			},
		});
	</script>
</html>
