{% extends "base.html" %}

{% block content %}
  <div class="container">
    <h1>> SYSTEM_INFO</h1>
    <ul>
      <li>Date: 23.01.2026</li>
      <li>Time: 12:00 - 21:00</li>
      <li>Location: Große Rechnerhalle (00.05.011)</li>
    </ul>
    <hr style="border-color: #333; margin: 30px 0;"></hr>
    <h1>> Prizes</h1>
    <ul>
      <li>1st Place: 100€</li>
      <li>2nd Place: 75€</li>
      <li>3rd Place: 50€</li>
    </ul>
    <hr style="border-color: #333; margin: 30px 0;"></hr>
    <h1>> FORMAT</h1>
    <ul>
      <li>Jeopardy Format <a target="blank_" href="https://www.youtube.com/watch?v=8ev9ZX9J45A">(Explainer Video)</a></li>
      <li>Team Size: 4 Members</li>
    </ul>
  </div>
  <div class="container">
      <h1>> REGISTRATION</h1>
      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          {% for category, message in messages %}
            <div class="alert {{ category }}">{{ message }}</div>
          {% endfor %}
        {% endif %}
      {% endwith %}

      <div class="status">
          <h2>Spots Remaining: {{ spots_left }} / 84</h2>
      </div>

      {% if spots_left > 0 %}
          <form method="POST">
              <label>Name</label>
              <input type="text" name="name" required>

              <label>TUM Email</label>
              <input type="email" name="email" placeholder="@tum.de" required>

              <label style="display:block; margin: 20px 0; line-height: 1.4;">
                  <input type="checkbox" name="looking_for_team" style="transform: scale(1.2); margin-right: 10px;">
                  I need a team / looking for group
              </label>

              <button type="submit">INITIALIZE_REGISTRATION</button>
          </form>
      {% else %}
          <h2 style="color:red">EVENT FULL</h2>
      {% endif %}
  </div>
{% endblock %}