{%- extends 'babase.j2' -%}
{# -*- Base des pages ordinaires, dans départements -*- #}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc97.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc9_mobile.css">
<link href="{{scu.STATIC_DIR}}/css/menu.css" rel="stylesheet" type="text/css" />
<link href="{{scu.STATIC_DIR}}/css/gt_table.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/qtip/jquery.qtip-3.0.3.min.css" />
{#
<link href="{{scu.STATIC_DIR}}/css/tooltip.css" rel="stylesheet" type="text/css" /> #}
<link rel="stylesheet" type="text/css" href="{{scu.STATIC_DIR}}/DataTables/datatables.min.css" />
{% endblock %}

{% block title %}
{% if title %}{{ title }} - ScoDoc{% else %}ScoDoc{% endif %}
{% endblock %}

{% block content %}
<!-- sco_page revamp -->
    <div id="mobileNav" mobile="true">
        <!-- Logo ScoDoc -->
        <img src="{{url_for('static', filename='icons/logo_rectangle.png')}}" alt="Logo ScoDoc" id="logo-scodoc">
        {% block mobileSemestre %}
        <!--  Titre Semestre -->
        <!-- Icone Menu Semestre -->
        {% endblock mobileSemestre %}
    </div>
    <div class="scodoc-container">
        <div class="app-corner">
            <div class="hamburger" desktop="true">
                <div class="scodoc-index"><a class="sco-title" href="{{
                    url_for('scodoc.index', scodoc_dept=g.scodoc_dept) }}"
                    >ScoDoc</a>
                </div>
            </div>
            <div class="toggle-sidebar" onclick="toggleSidebar()">
                <img id="toggle-sidebar-img" src="{{scu.STATIC_DIR}}/icons/back.svg" width="12px" alt="toggle sidebar"/>
            </div>
        </div>
        {% if sco.formsemestre %}
            <div class="formsemestre-page-header">
                {% include "flashed_messages.j2" %}
                {% if sco.formsemestre %}
                    {% block formsemestre_header %}
                        {% include "formsemestre_header.j2" %}
                    {% endblock %}
                {% endif %}
            </div>
        {% else %}
            {% include "flashed_messages.j2" %}
        {% endif %}
        <div id="sidebar">
            {% include "sidebar.j2" %}
        </div>

        <div id="app-content">
            <div id="gtrcontent" class="gtrcontent">
                <div class="sco-app-content">
                    {% block app_content %}
                        {{ content | safe }}
                    {% endblock %}
                </div>
            </div>
        </div>
    </div>
<!-- sco_page -->
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/libjs/menu.js"></script>
<script src="{{scu.STATIC_DIR}}/libjs/bubble.js"></script>
<script src="{{scu.STATIC_DIR}}/js/scodoc.js"></script>
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script src="{{scu.STATIC_DIR}}/DataTables/datatables.min.js"></script>
<script>
    let no_sidebar = {{ 'true' if no_sidebar else 'false' }};

    window.onload = function () {
        if (document.getElementById('gtrcontent')) {
            enableTooltips("gtrcontent");
        }
        if (document.getElementById('sidebar')) {
            enableTooltips("sidebar");
        }

        document.getElementById("logo-scodoc").addEventListener("click", function () {
            toggleSidebarOffCanvas();
        });

        if (no_sidebar) {
            toggleSidebar();
        }
    };
    const SCO_URL = "{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}";
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('collapsed');
        document.getElementById('app-content').classList.toggle('collapsed');
        document.getElementById('toggle-sidebar-img').classList.toggle('collapsed');
        document.querySelectorAll('.scodoc-index').forEach(element => {
            element.classList.toggle('collapsed');
        });
    }

</script>

{% endblock %}

{% macro render_field_errors(form, field_name) %}
    {% if form[field_name].errors %}
        <div>
            {% for error in form[field_name].errors %}
                <span class="wtf-field-error">{{ error }}</span>
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}