{% load i18n %}
{% load pipeline %}
{% load static %}

<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"fr" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %} class="position-relative h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
        {# TODO ETEAM Plus d'uniformité #}
        {% block title %}{{ title }}{% endblock title %} - {% trans "ETEAM Platform" %}
    </title>
    {# TODO ETEAM Plus d'uniformité #}
    <meta name="description" content="{% trans "Registration platform to the ETEAM." %}">

    {# Favicon #}
    <link rel="shortcut icon" href="{% static "favicon.ico" %}">
    <meta name="theme-color" content="#ffffff">

    {# Bootstrap CSS #}
    {% stylesheet 'bootstrap_fontawesome' %}

    {# Bootstrap JavaScript #}
    {% javascript 'bootstrap' %}
    {# bootstrap-select for beautiful selects and JQuery dependency #}
    {% javascript 'bootstrap_select' %}

    {# Si un formulaire requiert des données supplémentaires (notamment JS), les données sont chargées #}
    {% if form.media %}
        {{ form.media }}
    {% endif %}

    {% block extracss %}{% endblock %}
</head>
<body class="d-flex w-100 h-100 flex-column">
{% include "navbar.html" %}

<div id="body-wrapper" class="row w-100 my-3 flex-grow-1">
    <aside class="col-lg-2 px-2">
        {% include "sidebar.html" %}
    </aside>

    <main class="col d-flex flex-column flex-grow-1">
        <div class="container d-flex flex-column flex-grow-1">
            {% block content-title %}<h1 id="content-title">{{ title }}</h1>{% endblock %}

            {% include "messages.html" %}

            <div id="content" class="d-flex flex-column flex-grow-1">
                {% block content %}
                    <p>Default content...</p>
                {% endblock content %}
            </div>
        </div>
    </main>

    <aside class="col-lg-2"></aside>
</div>

{% include "footer.html" %}

{% trans "All tournaments" as modal_title %}
{% include "base_modal.html" with modal_id="tournamentList" modal_additional_class="modal-lg" %}

{% if user.is_authenticated %}
    {% trans "Search results" as modal_title %}
    {% include "base_modal.html" with modal_id="search" modal_form_method="get" modal_additional_class="modal-lg" %}

    {% trans "Join team" as modal_title %}
    {% trans "Join" as modal_button %}
    {% url "participation:join_team" as modal_action %}

    {% include "base_modal.html" with modal_id="joinTeam" %}
    {% trans "Create team" as modal_title %}
    {% trans "Create" as modal_button %}
    {% url "participation:create_team" as modal_action %}
    {% include "base_modal.html" with modal_id="createTeam" modal_button_type="success" %}
{% else %}
    {% trans "Log in" as modal_title %}
    {% trans "Log in" as modal_button %}
    {% url "login" as modal_action %}
    {% include "base_modal.html" with modal_id="login" %}
{% endif %}

{% javascript 'main' %}

<script>
    CSRF_TOKEN = "{{ csrf_token }}";
    document.querySelectorAll(".invalid-feedback").forEach(elem => elem.classList.add('d-block'))

    document.addEventListener('DOMContentLoaded', () => {
        initModal("tournamentList", "{% url "participation:tournament_list" %}")

        {% if user.is_authenticated and user.registration.is_admin %}
            initModal("search",
                () => "{% url "haystack_search" %}?q=" + encodeURI(document.getElementById("search-term").value),
                "search-results")
        {% endif %}

        {% if not user.is_authenticated %}
            initModal("login", "{% url 'login' %}")
        {% endif %}

        {% if user.is_authenticated and user.registration.participates and not user.registration.team %}
            initModal("createTeam", "{% url 'participation:create_team' %}")
            initModal("joinTeam", "{% url 'participation:join_team' %}")
        {% endif %}
    })
</script>

{% block extrajavascript %}{% endblock %}
</body>
</html>
