{% extends "base" %}
{% block title %}{{ title }}{% endblock %}
{% block main %}
<h1 class="text-body-emphasis">{{title}} User Interface</h1>
<p class="fs-5 col-md-8">
	You have reached the {{title}} User
	Interface. This site can be used by the
	contestants see the challenges and their
	progress and hints for that challenge. This
	site is <b>NOT</b> part of the challenge.
</p>

<hr class="mb-5">

<div class="row g-5 mb-5">
	<h2 class="text-body-emphasis">Challenge {{ challenge_idx}} &mdash; {{ challenge_title }}</h2>
	<p class="mt-1 mb-3">{{ challenge_description }}</p>
	<div class="col mt-1">
		<h3>Hints</h3>
		<button class="btn btn-primary my-2" type="button" data-bs-toggle="collapse" data-bs-target="#hints"
			aria-expanded="false" aria-controls="collapseExample">
			Show hints
		</button>
		<div class="collapse" id="hints">
			<ul class="list-unstyled ps-0">
				{% for hint in challenge_hints %}
				<li>
					<p>
						<svg class="bi" width="16" height="16">
							<use xlink:href="#arrow-right-circle" />
						</svg>
						{{hint}}
					</p>
				</li>
				{% endfor %}
			</ul>
		</div>
	</div>
</div>

<hr class="mb-5">

<div class="row g-5">
	<div class="col-md-6">
		<h2 class="text-body-emphasis">Contestants</h2>
		<p>
			There are cuttently {{ contestants_amount }} contestants.
			These contestants currently have had at least one connection to
			the challenge:
		</p>
		<ul class="list-unstyled ps-0">
			{% for contestant in contestants %}
			<li>
				<a class="icon-link mb-1" href="https://whatismyipaddress.com/ip/{{ contestant.ip }}">
					<svg class="bi" width="16" height="16">
						<use xlink:href="#arrow-right-circle" />
					</svg>
					{{ contestant.ip }}
				</a>
			</li>
			{% endfor %}
		</ul>
	</div>

	<div class="col-md-6">
		<h2 class="text-body-emphasis">Winners</h2>
		<p>
			There are cuttently {{ winners_amount }} winners. These contestants currently have been sent the
			secret:
		</p>
		<ul class="list-unstyled ps-0">
			{% for winner in winners %}
			<li>
				<a class="icon-link mb-1" href="https://whatismyipaddress.com/ip/{{ winner.ip }}">
					<svg class="bi" width="16" height="16">
						<use xlink:href="#arrow-right-circle" />
					</svg>
					{{ winner.ip }}
				</a>
			</li>
			{% endfor %}
		</ul>
	</div>
</div>
{% endblock %}