{% 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_volunteer %}
                    <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 class="alert alert-success">
                Les inscriptions sont désormais ouvertes ! Si jamais vous aviez essayé de vous inscrire le 22 janvier,
                il est possible que votre compte ait été supprimé. Vous pouvez désormais le recréer. Merci pour votre
                patience, et bon TFJM² ! :)
            </div>
        </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>
