<!-- Peter Burgess -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>WDC Group Project Admin</title>
<meta charset="UTF-8">
<!-- Styles -->
<link rel="stylesheet" href="/stylesheets/peter-style.css">
<!-- Our Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="javascripts/admin_mr_vue.js" defer></script>
<!-- Javascripts -->
<script src="javascripts/get_all_clubs_on_page_load.js"></script>
</head>
<body id="app">
<header>
<h1>University Of Adelaide Clubs Admin</h1>
</header>
<div class="content">
<main>
<nav>
<h3>Navigation</h3>
<ul>
<li>
<button type="button" onclick="document.location='/main.html'">
Main Page
</button>
</li>
<li>
<button type="button" onclick="document.location='/users/manage_account.html'">
Manage Account
</button>
</li>
<li>
<button type="button" onclick="document.location='/admin/add_new_admin.html'">
Add new admin
</button>
</li>
</ul>
</nav>
<div style="width: 100%; margin: 10px;">
<p>Search For: </p>
<!-- Input here will use vue to change which clubs will display -->
<input style="width: 80%" type="text" placeholder="All Clubs" v-model="clubs_to_display_search_term">
<div class="feed-container">
<div class="feed">
<div class="feed-title">
<h3>{{ see_all_clubs_feed_title }}</h3>
<hr>
</div>
<div class="feed-entry" v-for="club_data in filtered_clubs">
<h3 v-html="highlightText(club_data.name, clubs_to_display_search_term)">
<span v-if="club_data.name"
v-html="highlightText('- ' + club_data.name, clubs_to_display_search_term)"></span>
.
</h3>
<p v-html="highlightText(club_data.description, clubs_to_display_search_term)">
<span v-if="club_data.description"
v-html="highlightText('- ' + club_data.description, clubs_to_display_search_term)"></span>
</p>
<!-- Goes to the club managing page that club managers will see -->
<h4>
<a style="margin-bottom: 10px;"
v-bind:href="`/users/club_page.html?club_id=${club_data.id}`">
Manage Club
</a>
</h4>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>