achievements_project/frontend/webpage/templates/achievements_page.html.template

<div class="page-subsection">
	<div class="list-page-search page-subsection-chunk">
		<label for="achievement-search">Search</label>
		<input id="achievement-search" type="text" placeholder="Name" name="achievement-search"/>
	</div>
	<div class="list-page-partitions">
		<div class="list-page-filter-partition">
			<div class="page-subsection-wrapper">
				<div class="page-subheader">
					<p class="page-subheader-text">Filters</p>
					<div class="page-subheader-separator"></div>
				</div>
				<div class="list-page-filter-chunk page-subsection-chunk">
					<div class="page-subsection-wrapper">
						<div id="from-games-owned-filter" class="list-page-filter">
							<div class="list-page-filter-checkbox"></div>
							<p class="list-page-filter-name">My Games</p>
						</div>
						<div id="in-progress-filter" class="list-page-filter">
							<div class="list-page-filter-checkbox"></div>
							<p class="list-page-filter-name">In Progress</p>
						</div>
						<div id="completed-filter" class="list-page-filter">
							<div class="list-page-filter-checkbox"></div>
							<p class="list-page-filter-name">Completed</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="list-page-list-partition page-subsection-wrapper">
			<div class="page-subsection-chunk">
				<div class="list-page-list">
					<div class="list-page-header">
						<p class="list-page-entry-icon"></p>
						<p class="list-page-entry-text achievement-name">Name</p>
						<p class="list-page-entry-text achievement-description">Description</p>
						<p class="list-page-entry-text achievement-stages">Stages</p>
					</div>
					<template data-template="achievements-page-list: List<Basic>">
						<div class="list-page-entry">
							<img class="list-page-entry-icon" src="res/dummy_achievement.png" alt="Achievement Thumbnail"></img>
							<div class="list-page-entry-text-section">
								<p class="list-page-entry-text achievement-name">${achievement-name}</p>
								<p class="list-page-entry-text achievement-description">${achievement-description}</p>
								<p class="list-page-entry-text achievement-stages">${stages}</p>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</div>