{% 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">
        <h3>Event already started</h3>
      </div>
    </div>
{% endblock %}