{% extends "base.html" %}

{% block meta_title %}
    <meta property="og:title" content="h4tum CTF 2026">
    <meta name="twitter:title" content="h4tum CTF 2026">
{% endblock %}

{% block meta_description %}
    <meta property="og:description" content="Date: 23.01.2026 
    Time: 12:00 - 21:00 
    Location: Große Rechnerhalle (00.05.011)">
    <meta name="twitter:description" content="Date: 23.01.2026 
    Time: 12:00 - 21:00 
    Location: Große Rechnerhalle (00.05.011)">
{% endblock %}

{% block meta_image %}
    <meta property="og:image" content="{{ url_for('static', filename='h4tum_white.png', _external=True) }}">
    <meta name="twitter:image" content="{{ url_for('static', filename='h4tum_white.png', _external=True) }}">
{% endblock %}

{% 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: 150€</li>
      <li>2nd Place: 110€</li>
      <li>3rd Place: 75€</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>Paying by Card is possible<br><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">
      {% if spots_left > 0 %}
          <h2>Spots Remaining: {{ spots_left }} / {{max_spots}}</h2>
      {% else %}
          <h2>Register for Waitlist</h2>
          <p>This event is currently full.</p>
          <p>Join the mailing list to be automatically notified of free spots.</p>
      {%endif %}
      </div>

      <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>
    </div>
{% endblock %}