Fix the following html:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Contents</title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/vue-router@4"></script>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	</head>
	<body>
		<div id="app">
			<template>
				<div>
					<nav class="navbar navbar-expand-lg navbar-light bg-light">
						<div class="collapse navbar-collapse" id="navbarNav">
							<ul class="navbar-nav">
								<li class="nav-item">
									<router-link class="nav-link" to="/">Homepage</router-link>
								</li>
								<li class="nav-item" :class="{'active': $route.path === '/contents'}">
									<router-link class="nav-link" to="/contents">Contents</a>
								</li>
								<li class="nav-item">
									<router-link class="nav-link" to="/account">My Account</router-link>
								</li>
							</ul>
						</div>
					</nav>
					<div class="container">
						<h1>Contents</h1>
						<form @submit.prevent="search">
							<div class="form-group">
								<label for="search">Search:</label>
								<input type="text" class="form-control" id="search" v-model="searchTerm" name="search">
							</div>
							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
						<br />
						<p v-if="error" style="color:red">{{error}}</p>
						<template v-else>
							<a v-if="prevPage" :href="prevPageUrl" class="btn btn-primary">Previous Page</a>
							<div v-for="(content, index) in contents" :key="index" class="card">
								<div class="card-body">
									<h5 class="card-title">Question from User:</h5>
									<pre class="card-text">{{content.prompt}}</pre>
									<div>Answer from AI:<pre>{{content.answer}}</pre></div>
										<div>Delete this question: <a :href="`/contentdel?id=${content.id}`">delete</a></div>
								</div>
							</div>
							<br/>
							<a v-if="nextPage" :href="nextPageUrl" class="btn btn-primary">Next Page</a>
						</template>
					</div>
				</div>
			</template>
		</div>

		<script>
			export default {
				data() {
					return {
						searchTerm: "",
						contents: [],
						prevPage: false,
						nextPage: false,
						prevPageUrl: "",
						nextPageUrl: "",
						error: "",
					};
				},
				mounted() {
					this.fetchContents();
				},
				methods: {
					async fetchContents() {
						try {
							const response = await fetch("/api/contents");
							if (!response.ok) {
								throw new Error(response.statusText);
							}
							const data = await response.json();
							this.contents = data.contents;
							this.prevPage = !!data.prevPage;
							this.nextPage = !!data.nextPage;
							this.prevPageUrl = data.prevPage || "";
							this.nextPageUrl = data.nextPage || "";
						} catch (error) {
							this.error = "Failed to fetch contents";
						}
					},
					async search() {
						try {
							const response = await fetch(`/api/contents?search=${this.searchTerm}`);
							if (!response.ok) {
								throw new Error(response.statusText);
							}
							const data = await response.json();
							this.contents = data.contents;
							this.prevPage = !!data.prevPage;
							this.nextPage = !!data.nextPage;
							this.prevPageUrl = data.prevPage || "";
							this.nextPageUrl = data.nextPage || "";
						} catch (error) {
							this.error = "Failed to search contents";
						}
					},
				}
			}

app.mount('#app')

// 现在，应用已经启动了！
	<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>
	</body>
</html>