<!DOCTYPE html>
<html class="has-navbar-fixed-top">
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <!-- Barre de navigation -->
    <nav class="navbar is-primary is-spaced is-fixed-top py-0">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item is-size-5" href="https://scodoc.org/">ScoDoc</a>
                <!-- Menu deroulant affiché uniquement sur mobile -->
                <div class="navbar-burger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="navbar-menu">
                <div class="navbar-start">
                    <!-- Liste des catégories -->
                    <a class="navbar-item" href="SAE.html">SAÉ</a>
                    <a class="navbar-item" href="ressources.html">Ressources</a>
                    <a class="navbar-item" href="ressourcesS1.html">Semestre 1</a>
                    <a class="navbar-item" href="ressourcesS2.html">Semestre 2</a>
                </div>
                <div class="navbar-end">
                    <!-- Barre de recherche -->
                    <div class="control has-icons-left">
                        <input id="rechercher" class="input" type="text" placeholder="Rechercher">
                        <span class="icon is-left">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <!-- Contenu de la page -->
    <div class="container">
        <div class="box">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</body>
</html>
<!-- Script JQuery | migration vers un fichier .js envisageable -->
<script>
    $("document").ready(function() {
        // Affichage mobile du menu | affiche/cache le menu contenant la liste des catégories 
        // en appuyant sur le burger/les trois traits
        $(".navbar-burger").click(function() {
            $(".navbar-burger").toggleClass("is-active");
            $(".navbar-menu").toggleClass("is-active");
        });
        $(".button").click(function() {
            $(this).addClass("is-loading");
        });
        // Redirige vers la page tapé dans la barre de recherche | recheche brut, possible d'amélioration avec 
        // auto-complétion, créer une page web "page n'existe pas", recherche par motsclés, page avec une liste des 
        // pages web possibles en fonction de ce que entre l'utilisateur
        // ex: "R101" -> ./HTML/R101.html
        $("#rechercher").keyup(function(e) {
            if(e.keyCode == 13) {location.href = $(this).val().toUpperCase() + ".html"}
        });
    });
</script>