{% extends "user:base" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<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 %}