{% extends "admin:base" %}
{% block content %}
<h1 class="text-body-emphasis">{{title}}</h1>
<p class="fs-5 col-md-8">
  You have reached the {{title}}. This site can be used by
  the host of the challenge to see the challenge progress, solution, 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.id }} &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 class="col mt-1">
    <h3>Solution</h3>
    <button class="btn btn-primary my-2" type="button" data-bs-toggle="collapse" data-bs-target="#solution"
      aria-expanded="false" aria-controls="collapseExample">
      Show solution
    </button>
    <div class="collapse" id="solution">
      <p>
        <svg class="bi" width="16" height="16">
          <use xlink:href="#arrow-right-circle" />
        </svg>
        {{challenge.solution}}
      </p>
    </div>
  </div>
</div>
<hr class="mb-5">
{% include "comp:contestants_winners" %}
{% endblock %}