{% extends "base.html" %}

{% block content %}

    <link rel="stylesheet" href="{{ url_for('static', filename='timeline.css') }}">
    <div class="container">
    <h1>> 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">(Explanation)</a></li>
      <li>Max Team Size: 4 Members</li>
      <li>Teams will be finalized on site at the competition</li>
    </ul>
    <hr style="border-color: #333; margin: 30px 0;"></hr>
    <h1>> Timeline</h1>
    <div class="timeline-container">
      <div class="line"></div>
      
      <div class="items-wrapper">
        <div class="item">
          <div class="time">12:00</div>
          <div class="dot"></div>
          <div class="label">Entry<span>Setup & find team</span></div>
        </div>

        <div class="item">
          <div class="time">13:00</div>
          <div class="dot"></div>
          <div class="label">Start of Event</div>
        </div>

        <div class="item">
          <div class="time">~18:30</div>
          <div class="dot"></div>
          <div class="label">Pizza Time<span>Bring cash. <a href="https://lapergola.igetnow.com/menu" target="_blank">Menu</a></span></div>
        </div>

        <div class="item">
          <div class="time">21:00</div>
          <div class="dot"></div>
          <div class="label">End of Event</div>
        </div>

        <div class="item">
          <div class="time">21:15</div>
          <div class="dot"></div>
          <div class="label">Awards</div>
        </div>
      </div>
    </div>
    <hr style="border-color: #333; margin: 30px 0;"></hr>
    <a href="{{ url_for('main.rules') }}" style="text-align: center;"><h3>Rules and Code of Conduct</h3></a>

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