{% extends "base.html" %}

{% block title %}Technical Turbulence - Competition Log{% endblock %}

{% block content %}

<div class="competitions">
        <div class="sidebar">
            <div class="sidebar-content">
                {% for season in competitions_by_season.keys() %}
                <a href="#{{ season.replace(' ', '') }}">{{ season }}</a>
                {% endfor %}
            </div>
        </div>

        <div class="competitions-container">
            <div class="competitions-inner">
                <h1 class="heading" id="comp">Competition log</h1>
                <hr id="comp-hr">

                <div class="content-container">
                    {% for season, comps in competitions_by_season.items() %}
                <h1 id="{{ season.replace(' ', '') }}" class="competition-year">{{ season }}</h1>

                {% for comp in comps %}
                <div class="competition-card">
                    {% if comp.image_path %}
                    <div class="competition-card-img">
                        <img src="{{ url_for('static', filename=comp.image_path) }}">
                    </div>
                    {% endif %}
                    <div class="competition-header">
                        <p class="competition-name">{{ comp.event_name }}</p>
                        <p class="middle-dot">·</p>
                        <p class="competition-date">{{ comp.date }}</p>
                    </div>

                    <p class="competition-subtitle">Description</p>

                    <p class="competition-description">{{ comp.description }}</p>

                    {% if comp.awards %}
                    <p class="competition-subtitle">Awards</p>

                    <ul class="competition-awards">
                        {% for award in comp.awards.split('|') %}
                        <li>{{ award }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                    {% endfor %}

                    {% endfor %}
                </div>

            </div>
        </div>

    </div>

{% endblock %}