{% extends "base" %}
{% block main %}
<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_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 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">

<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 %}