{% load static %}
<header id="site_header">
    <div class="topbar">
        <div class="content clearfix">
            <div class="top_details clearfix f_left">
                <div class="languages-select languages-drop">
                    <span><i class="ico-globe4"></i><span>Français </span></span>
                    <div class="languages-panel">
                        <ul class="languages-panel-con">
                            <li class="active"><a href="#">Français <i class="ico-check lang_checked"></i></a></li>
                            <li><a onclick="changeLang(translations.code)" href="#">English</a></li>
                        </ul>
                    </div>
                </div>
                <span class="top_login">
                    <a style="color: deepskyblue" class="" href="{% url 'home' %}"> <span
                            class="glyphicon glyphicon-log-in"> </span> Connexion </a>
                </span>
                <div style="display: none" class="zoom-anim-dialog small-dialog mfp-hide login_popup" id="login-popup">

                    <form class="login_form_colored has-validation-callback" method="post" id="log">
                        <div class="lfc_user_row">
                            <span class="lfc_header">CONNEXION </span>
                        </div>
                        <div class="lfc_user_row">
                            <label for="login_user_name">
                                <span class="lfc_alert"></span>
                                <i class="lfc_icon ico-user5"></i>
                                <input type="text" name="log_email" id="log_email" required="">
                            </label>
                        </div>
                        <div class="lfc_user_row">
                            <label for="login_password">
                                <span class="lfc_alert"></span>
                                <i class="lfc_icon ico-key3"></i>
                                <input type="password" name="log_password" id="log_password" required="">
                            </label>
                        </div>
                        <div id="error_login" class="lfc_user_row alert-danger">


                        </div>
                        <div class="lfc_user_row clearfix">
                            <div class="my_col_half">
                                <label for="rememberme">
                                    <span class="remember-box">
                                        <input type="checkbox" id="rememberme" name="rememberme1">
                                        <span>Garder ma connexion</span>
                                    </span>
                                </label>
                            </div>
                            <div class="my_col_half clearfix">
                                <button type="submit" name="login" id="log-btn1" class="send_button f_right upper">
                                    Envoyer
                                </button> <img style="float: right; display: none;" class="loaderImage"
                                    data-no-retina="" src="{% static 'images/loader.gif' %}">
                            </div>
                        </div>
                        <div class="-g-signin2">
                            <a href="https://m-tech.africa/web/login/google"><img
                                    src="{% static 'images/google.png' %}">connexion avec
                                google</a>
                            ou
                            <a href="https://m-tech.africa/web/login/fb"><img
                                    src="{% static 'images/fb.png' %}">connexion avec
                                facebook</a>

                        </div>

                        <a class="lfc_forget_pass" href="https://m-tech.africa/web/register?t=rec">Mot De Passe oublié
                            ?</a>
                        <a class="lfc_forget_login " href="https://m-tech.africa/web/register?t=reg">Créer un
                            compte</a>
                    </form>

                </div>
                <span><i class="icon ico-phone5"></i><span class="title"></span> Tel: +237 659 256 934/ 668 927 049/ 650
                    110 805</span>
                <span><i class="icon ico-comment2"></i><span class="title">Email:</span>
                    contact@infolab-tech.com</span>
            </div>

            <div class="top-socials box_socials f_right">
                <a href="https://web.facebook.com/diaspo24/" target="_blank">
                    <span class="soc_name">Facebook</span>
                    <span class="soc_icon_bg"></span>
                    <i class="ico-facebook4"></i>
                </a>

            </div>
        </div>
        <!-- End content -->
        <span class="top_expande not_expanded">
            <i class="no_exp ico-angle-double-down"></i>
            <i class="exp ico-angle-double-up"></i>
        </span>
    </div>
    <!-- End topbar -->



    <div id="navigation_bar-sticky-wrapper" class="sticky-wrapper" style="height: 75px;">
        <div id="navigation_bar">
            <div class="content">
                <div id="logo">
                    <a href="home">
                        <img width="200%" height="200%" class="" data-no-retina="" src="{% static 'images/logo.png' %}"
                            alt="InfoLab Logo">
                    </a>
                </div>




                <nav id="main_nav">
                    <div id="nav_menu">
                        <span class="mobile_menu_trigger">
                            <a href="#" class="nav_trigger"><span></span></a>
                        </span>
                        <ul id="navy" class="clearfix horizontal_menu" style="">
                            <li class="normal_menu mobile_menu_toggle  current_page_item">
                                <a href="{% url 'home' %}"><span>Accueil</span></a>

                            </li>
                            <li class="normal_menu mobile_menu_toggle ">
                                <a href="{% url 'services' %}"><span>Services</span></a>

                            </li>


                            <li class="has_mega_menu mobile_menu_toggle " onclick="change_color(this);">
                                <a href="{% url 'product_list' %}"><span>Produits</span></a>
                            </li>
                            <li class="normal_menu mobile_menu_toggle ">
                                <a href="{% url 'downloads' %}"><span>Téléchargements</span></a>

                            </li>

                            <li class="normal_menu mobile_menu_toggle ">
                            </li>

                            <li class="normal_menu mobile_menu_toggle ">
                                <a href="{% url 'about' %}"><span>À propos de nous</span></a>

                            </li>
                            <li class="has_image_menu mobile_menu_toggle ">
                                <a href="{% url 'contact' %}"><span>Contact</span></a>

                            </li>
                            {% comment %} {% if request.session.is_authentificated %}
                            <li class="normal_menu mobile_menu_toggle ">
                                <a href="#"><span>Profile</span></a>

                            </li>
                            {% else %}
                            <li class="normal_menu mobile_menu_toggle ">
                                <a href="{% url 'loginPage' %}"><span>Login</span></a>
                            </li>
                            <li class="normal_menu mobile_menu_toggle ">
                                <a href="{% url 'registerPage' %}"><span>Inscription</span></a>
                            </li>
                            {% endif %} {% endcomment %}

                        </ul>
                    </div>
                </nav>
                <!-- End Nav -->

                <div class="clear"></div>
            </div>
        </div>
    </div>
</header>
<script>
    function change_color(target_elemetnt){
        e = document.querySelectorAll(".normal_menu .mobile_menu_toggle");
        active = document.querySelector(".current_page_item");
        e.forEach(function(a){
            console.log("log");
            if (element === active){
                element.classList.remove("current_page_item");
            }
            if (element == target_elemetnt){
                element.classList.add("current_page_item");
            }
        });

    }
</script>