choose-game-topic.njk

{% extends "default.njk" %}

{% block main %}
		<div class="subnav">
			<div x-data="{mode: getParam('mode')}"
						class="container-fluid" style="display: flex; align-items: center;">
				<span 
					class="material-symbols-outlined btn-back" 
					style="cursor: pointer;"
					onclick="window.history.back()"
				>arrow_back_ios
				</span>
				<h4 class="margin-auto" x-text="titleCase(mode.replaceAll('-', ' '))"></h4>
			</div>
		</div>
		<div class="position-relative p-5 text-center">
			<h1 class="inter pb-4 md-align-l">Choose a game topic</h1>
			<div x-data="{data: []}" x-init="data = await db.query(`
						select topic_name, topic_color
						from topic 
						where status_name = 'Production' 
						order by topic_sequence; `)">
				<template x-for="topic in data">
					<div class="d-grid gap-2 col-lg-6 mx-auto">
						<a 		:style="{'background-color': '#' + topic.topic_color}" 
									:href="`/choose-game-difficulty/?topic_name=${topic.topic_name}&topic_color=${topic.topic_color}&mode=${(new URLSearchParams(location.search)).get('mode')}`"
									class="btn btn-lg align-middle mb-3">
							<b x-text="topic.topic_name" class="fs-4"></b>
							<span class="material-symbols-outlined btn-arrow-icon">arrow_forward_ios</span>
						</a>
					</div>		
				</template>
			</div>
		</div>

{% endblock %}