{% load static i18n static %}

<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en" }}" {% 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>
        {% block title %}{{ title }}{% endblock title %} - Plateforme du TFJM²
    </title>
    <meta name="description" content="Plateform d'inscription au TFJM².">

    {# Favicon #}
    <link rel="shortcut icon" href="{% static "favicon.ico" %}">
    <meta name="theme-color" content="#ffffff">
    {% if no_cache %}
        <meta name="turbolinks-cache-control" content="no-cache">
    {% endif %}

    {# Bootstrap CSS #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">

    {# JQuery, Bootstrap and Turbolinks JavaScript #}
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js"
            crossorigin="anonymous"></script>

    {# 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">
<main class="mb-auto">
    <nav class="navbar navbar-expand-md navbar-light bg-light fixed-navbar shadow-sm">
        <a class="navbar-brand" href="https://tfjm.org/">
            <img src="{% static "tfjm.svg" %}" style="width: 42px;" alt="Logo TFJM²" id="navbar-logo">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarNavDropdown" class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a href="{% url "index" %}" class="nav-link"><i class="fas fa-home"></i> {% trans "Home" %}</a>
                </li>
                <li class="nav-item active">
                    <a href="#" class="nav-link" data-toggle="modal" data-target="#tournamentListModal">
                        <i class="fas fa-calendar-day"></i> {% trans "Tournaments" %}
                    </a>
                </li>
                {% if user.is_authenticated and user.registration.is_admin %}
                    <li class="nav-item active">
                        <a href="{% url "registration:user_list" %}" class="nav-link"><i class="fas fa-user"></i> {% trans "Users" %}</a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link" data-toggle="modal" data-target="#teamsModal"><i class="fas fa-users"></i> {% trans "Teams" %}</a>
                    </li>
                {% elif user.is_authenticated and user.registration.participates %}
                    {% if not user.registration.team %}
                        <li class="nav-item active">
                            <a href="#" class="nav-link" data-toggle="modal" data-target="#createTeamModal">
                                <i class="fas fa-users"></i> {% trans "Create team" %}
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a href="#" class="nav-link" data-toggle="modal" data-target="#joinTeamModal">
                                <i class="fas fa-users"></i> {% trans "Join team" %}
                            </a>
                        </li>
                    {% else %}
                        <li class="nav-item active">
                            <a href="{% url "participation:my_team_detail" %}" class="nav-link">
                                <i class="fas fa-users"></i> {% trans "My team" %}
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a href="{% url "participation:my_participation_detail" %}" class="nav-link">
                                <i class="fas fa-file-pdf"></i> {% trans "My participation" %}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
                <li class="nav-item active">
                    <a class="nav-link" href="{% url "participation:chat" %}">
                        <i class="fas fa-comments"></i> {% trans "Chat" %}</a>
                </li>
                {% if user.admin %}
                    <li class="nav-item active">
                        <a data-turbolinks="false" class="nav-link" href="{% url "admin:index" %}"><i class="fas fa-cog"></i> {% trans "Administration" %}</a>
                    </li>
                {% endif %}
            </ul>
            <ul class="navbar-nav ml-auto">
                {% if user.registration.is_admin %}
                    <form class="navbar-form" role="search" onsubmit="event.preventDefault()">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="{% trans "Search..." %}" name="q" id="search-term" value="{{ request.GET.q }}">
                            <div class="input-group-btn">
                                <button class="btn btn-default" data-toggle="modal" data-target="#searchModal"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                {% endif %}
                {% if "_fake_user_id" in request.session %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url "registration:reset_admin" %}?path={{ request.path }}"><i class="fas fa-tools"></i> {% trans "Return to admin view" %}</a>
                    </li>
                {% endif %}
                {% if not user.is_authenticated %}
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url "registration:signup" %}"><i class="fas fa-user-plus"></i> {% trans "Register" %}</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">
                            <i class="fas fa-sign-in-alt"></i> {% trans "Log in" %}
                        </a>
                    </li>
                {% else %}
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-user"></i> {{ user.first_name }} {{ user.last_name }}
                        </a>
                        <div class="dropdown-menu dropdown-menu-right"
                                 aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="{% url "registration:my_account_detail" %}">
                                <i class="fas fa-user"></i> {% trans "My account" %}
                            </a>
                            <a class="dropdown-item" href="{% url "logout" %}">
                                <i class="fas fa-sign-out-alt"></i> {% trans "Log out" %}
                            </a>
                        </div>
                    </li>
                {% endif %}
            </ul>
        </div>
    </nav>
    {% block fullcontent %}
    <div class="{% block containertype %}container{% endblock %} my-3">
        {% block contenttitle %}{% endblock %}
        {% if user.is_authenticated and not user.registration.email_confirmed %}
            <div class="alert alert-warning alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                 </button>
                {% url "registration:email_validation_resend" pk=user.pk as send_email_url %}
                {% blocktrans trimmed %}
                    Your email address is not validated. Please click on the link you received by email.
                    You can resend a mail by clicking on <a href="{{ send_email_url }}">this link</a>.
                {% endblocktrans %}
            </div>
        {% endif %}
        <div id="messages"></div>
        <div id="content">
            {% block content %}
                <p>Default content...</p>
            {% endblock content %}
        </div>
    </div>
    {% endblock %}
</main>

<footer class="bg-light text-primary mt-auto py-2">
    <div class="container-fluid">
        <div class="row">
            <div class="col-10">
                <form action="{% url 'set_language' %}" method="post"
                      class="form-inline">
                    <span class="text-muted mr-1">
                        <a target="_blank" href="mailto:&#99;&#111;&#110;&#116;&#97;&#99;&#116;&#64;&#116;&#102;&#106;&#109;&#46;&#111;&#114;&#103;"
                           class="text-muted"><i class="fas fa-envelope"></i> {% trans "Contact us" %}</a>
                    </span>
                    {% csrf_token %}
                    <select title="language" name="language"
                            class="form-control form-control-sm language"
                            onchange="this.form.submit()">
                        {% get_current_language as LANGUAGE_CODE %}
                        {% get_available_languages as LANGUAGES %}
                        {% for lang_code, lang_name in LANGUAGES %}
                            <option value="{{ lang_code }}"
                                    {% if lang_code == LANGUAGE_CODE %}
                                    selected{% endif %}>
                                {{ lang_name }} ({{ lang_code }})
                            </option>
                        {% endfor %}
                    </select> &nbsp;
                    <noscript>
                        <input type="submit">
                    </noscript> &nbsp;
                    <a target="_blank" class="text-muted" href="{% url "about" %}">{% trans "About" %}</a> &nbsp; &mdash; &nbsp;
                    <a target="_blank" class="text-muted"
                       href="https://gitlab.com/animath/si/plateforme-tfjm">
                        <i class="fab fa-gitlab"></i>
                    </a>
                </form>
            </div>
            <div class="col text-right">
                <a href="#" data-turbolinks="false" class="text-muted">
                    <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</footer>

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

{% if user.is_authenticated %}
    {% trans "All teams" as modal_title %}
    {% include "base_modal.html" with modal_id="teams" modal_additional_class="modal-lg" %}

    {% 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 %}

<script>
    CSRF_TOKEN = "{{ csrf_token }}";
    $(".invalid-feedback").addClass("d-block");

    $(document).ready(function () {
        $('a[data-target="#tournamentListModal"]').click(function() {
            let modalBody = $("#tournamentListModal div.modal-body");
            if (!modalBody.html().trim())
                modalBody.load("{% url "participation:tournament_list" %} #form-content")
        });

        {% if user.is_authenticated and user.registration.is_admin %}
            $('a[data-target="#teamsModal"]').click(function() {
                let modalBody = $("#teamsModal div.modal-body");
                if (!modalBody.html().trim())
                    modalBody.load("{% url "participation:team_list" %} #form-content")
            });
            $('button[data-target="#searchModal"]').click(function() {
                let modalBody = $("#searchModal div.modal-body");
                let q = encodeURI($("#search-term").val());
                modalBody.load("{% url "haystack_search" %}?q=" + q + " #search-results");
            });
        {% endif %}

        {% if not user.is_authenticated %}
        $('a[data-target="#loginModal"]').click(function() {
                let modalBody = $("#loginModal div.modal-body");
                if (!modalBody.html().trim())
                    modalBody.load("{% url "login" %} #form-content")
            });
        {% endif %}

        {% if user.is_authenticated and user.registration.participates and not user.registration.team %}
            $('a[data-target="#createTeamModal"]').click(function() {
                let modalBody = $("#createTeamModal div.modal-body");
                if (!modalBody.html().trim())
                    modalBody.load("{% url "participation:create_team" %} #form-content");
            });
            $('a[data-target="#joinTeamModal"]').click(function() {
                let modalBody = $("#joinTeamModal div.modal-body");
                if (!modalBody.html().trim())
                    modalBody.load("{% url "participation:join_team" %} #form-content");
            });
        {% endif %}
    });
</script>

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