{% extends 'base.html' %}
{% load static %}

{% block title %}World Series Racing{% endblock %}

{% block content %}
<div class="container vitrine">
    <div class="main-frame eurostile">
        <div>
            <div class="mid">{{ last_race_details.season_name }}</div>
            <div class="large">{{ last_race_details.race.location }}</div>
            <div class="mid">{{ last_race_details.race.circuit }}</div>
        </div>
        <div class="detail">
            {% for stat in last_race_details.results %}
                <div>
                    <div class="title">{{ stat.driver_name }}</div>
                    <div class="score">{{ stat.pos_string }} position <br>{{ stat.score }} PTS</div>
                </div>
            {% endfor %}
        </div>
        {% if last_race_details.race.finishing_position < 5 %}
            <div class="mid">WSR Admis en finale</div>
        {% else %}
            <div class="mid">WSR recalé</div>
        {% endif %}
    </div>
    <div class="seconds-frames">
        {% for race in second_frame_races %}
            <div class="second-frame" style="background-image: url('{% get_media_prefix %}{{ race.image }}');">
                <div class="header">
                    {% if race.finishing_position == 1 %}
                        <div class="pos">{{ race.pos_string }}</div>
                    {% else %}
                        <div class="pos second">{{ race.pos_string }}</div>
                    {% endif %}
                </div>
                {% if race.participation_type == 'invitation' %}
                    <div class="event-type"><i class="fa-solid fa-envelope"></i> Invitation évènement</div>
                {% else %}
                    <div class="event-type"><i class="fa-solid fa-flag-checkered"></i> Participation</div>
                {% endif %}

                <div class="event-desc">
                    {% if race.participation_type == 'invitation' %}
                        <div class="eurostile w-75">{{ race.type }}<br>{{ race.name }}</div>
                        <div class="event-meta-info">{{ race.location }}, {{ race.circuit }}</div>
                    {% else %}
                        <div class="eurostile w-75">{{ race.type }}<br>{{ race.location }}</div>
                        <div class="event-meta-info">{{ race.circuit }}</div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="container page-content">
    <div class="d-flex">
        <div class="menu flex-grow-1">
            <h4 class="eurostile title">Menu</h4>
            <a class="link active" href="#" id="news" data-type="changePageContent">Actualité WSR</a>
            <a class="link" href="#" id="racesResults" data-type="changePageContent">Résultats des courses</a>
            <a class="link" href="#" id="calendar" data-type="changePageContent">Calendrier</a>
        </div>
        <div class="content" id="pageContent">
            <div id="newsContainer">
                <h4 class="eurostile title">Actualité WSR</h4>

                <div class="news-cards">
                    {% for article in six_last_articles %}
                        <a class="news-card" href="{% url 'article' id=article.id %}">
                            <div class="header">
                                <div class="logo">
                                    <img src="{% static 'images/WSR.png' %}" alt="Logo WSR">
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="eurostile">{{ article.title }}</div>
                                <div class="desc">{{ article.summary }}</div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
                <div class="d-flex justify-content-end">
                    <a class="btn" href="#">Voir tout</a>
                </div>
            </div>
            <div id="racesResultsContainer" style="display: none;">
                <h4 class="eurostile title">Résultat des courses</h4>
                {% for race in three_last_races_results %}
                    <h5>Saison {{ race.race.season_id }} - {{ race.race.location }}, {{ race.race.circuit }}</h5>
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">Position de départ</th>
                            <th scope="col">Position d'arrivée</th>
                            <th scope="col">Score</th>
                            <th scope="col">Pilote</th>
                            <th scope="col">Véhicule</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for result in race.results %}
                            <tr>
                                <th>{{ result.starting_position }}</th>
                                <th scope="row">{{ result.finishing_position }}</th>
                                <td>{{ result.score }}</td>
                                <td>{{ result.driver_name }}</td>
                                <td>{{ result.vehicle_brand }} {{ result.vehicle_model }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% endfor %}
                <div class="d-flex justify-content-end">
                    <a class="btn" href="#">Voir tout</a>
                </div>
            </div>
            <div id="calendarContainer" style="display: none;">
                <h4 class="eurostile title">Calendrier des courses</h4>
                <p>Nous sommes désolés, mais cet onglet n'est pas encore opérationnel.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
    const links = document.querySelectorAll("[data-type='changePageContent']");
    const containers = {};

    function hideAllContainers() {
        for (var container in containers) {
            containers[container].style.display = 'none';
        }
    }

    function showContainer(container) {
        hideAllContainers();
        container.style.display = 'block';
    }

    function setActiveLink(link) {
        for (var i = 0; i < links.length; i++) {
            links[i].classList.remove('active');
        }
        link.classList.add('active');
    }

    function getUrlParameter(name) {
        name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
        const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        const results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    links.forEach(function (link) {
        link.addEventListener('click', function (event) {
            event.preventDefault();
            setActiveLink(link);

            var linkId = link.getAttribute('id');
            var containerId = linkId + 'Container';
            var container = document.getElementById(containerId);
            if (container) {
                showContainer(container);
                history.replaceState(null, null, '?content=' + linkId);
            }
        });
    });

    links.forEach(function (link) {
        const linkId = link.getAttribute('id');
        const containerId = linkId + 'Container';
        const container = document.getElementById(containerId);
        if (container) {
            containers[containerId] = container;
        }
    });

    const contentParam = getUrlParameter('content');
    if (contentParam !== '') {
        const targetLink = document.getElementById(contentParam);
        if (targetLink) {
            targetLink.click();
        }
    }
</script>
{% endblock %}