{% load static %}
{% load i18n %}
{% load changelang %}
{% load avatar_tags %}
{% get_current_language as current_language %}

<!DOCTYPE HTML>

<html>
<head>
	<meta charset="utf-8" />
	<head>
		    <link rel="shortcut icon" href="{% static 'images/Ernesto_logo.ico' %}">
    <meta charset="utf-8" />
    <title>{% block titre %}{% endblock %}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	{% block extrahead %}{% endblock %}
	  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
	<link rel="stylesheet" href="{% static 'css/main.css' %}?version=1" />
	<link rel="stylesheet" href="{% static 'css/add2calendar.css' %}">

</head>
	<body class="subpage">

		<!-- Header -->



	<nav class="navbar navbar-expand-md">
		<div class="container-fluid">
  <!-- Brand -->
  <a class="navbar-brand" href="{% url 'home' %}"><img style='vertical-align: middle;float:left;height:3em;width:auto' src='{% static "images/Ernestophone_white.png" %}'/></a>

  <!-- Links -->
  <ul class="navbar-nav mr-auto" >

			{% if not user.is_authenticated %}
    <li class="nav-item">
      <a class="nav-link" href="{% url 'home' %}"><b>{% trans "Accueil" %}</b></a>
    </li>
    <li class="nav-item">
      <a class="nav-link"href="{% url 'calendrier:liste' %}"><b>{% trans "Agenda" %}</b></a>
    </li>
		{% else %}
		<li class="nav-item">
			<a class="nav-link" href="{% url 'calendrier:home' %}"><b>{% trans "Agenda" %}</b></a>
		</li>
		{% endif %}
		<li class="nav-item">
			<a class="nav-link" href="{% url 'partitions:liste' %}"><b>{% trans "Répertoire" %}</b></a>
		</li>
			{% if user.is_authenticated %}
			<li class="nav-item">
				<a class="nav-link" href="{% url 'instruments:liste' %}"><b>{% trans "Instruments" %}</b></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="{% url 'pads:list' %}"><b>{% trans "Pads" %}</b></a>
			</li>
    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="{% url 'social' %}" id="navbardrop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <b>{% trans 'Social'%}</b>
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="{% url 'trombonoscope:view' %}">{% trans "Trombonoscope" %}</a>
        <a class="dropdown-item" href="https://photos.cof.ens.fr/index.php/Clubs-du-COF/L'Ernestophone" target="_blank">{% trans "Galerie Photo" %}</a>
				<a class="dropdown-item" href="https://heyzine.com/flip-book/b2cf4809b7.html" target="_blank">{% trans "Year Book 2021" %}</a>
      </div>
    </li>
		{% if user.is_superuser or user.profile.is_chef or user.profile.is_chef_event or user.profile.is_chef_com %}
		<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="{% url 'chef' %}" id="navbardrop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <b>{% trans 'Le pouvoir des cheff·e·s'%}</b>
      </a>
      <div class="dropdown-menu">
				{% if user.is_superuser or user.profile.is_chef %}
        <a class="dropdown-item" href="/admin/">{% trans "Administration" %}</a>
				{% endif %}
				{% if user.profile.is_chef %}
				<a class="dropdown-item" href="{% url 'calendrier:create_event' %}">{% trans "Ajouter un événement" %}</a>
        <a class="dropdown-item" href="{% url 'actu:liste' %}">{% trans "Modifier les actualités" %}</a>
				<a class="dropdown-item" href="{% url 'liste_photo' %}">{% trans "Modifier les photos" %}</a>
				<a class="dropdown-item" href="{% url 'liste_video' %}">{% trans "Modifier les vidéos" %}</a>
				<a class="dropdown-item" href="{% url 'partitions:list_setlist' %}">{% trans "Gérer les programmes de répétition" %}</a>
				{% elif user.profile.is_chef_event %}
				<a class="dropdown-item" href="{% url 'calendrier:create_event' %}">{% trans "Ajouter un événement" %}</a>

				{% elif user.profile.is_chef_com %}
				<a class="dropdown-item" href="{% url 'liste_photo' %}">{% trans "Modifier les photos" %}</a>
				<a class="dropdown-item" href="{% url 'liste_video' %}">{% trans "Modifier les vidéos" %}</a>
				{% endif %}

      </div>
    </li>
		{% endif %}
		{% else %}
		<li class="nav-item">
			<a class="nav-link" href="{% url 'home' %}#contact"><b>{% trans "Contact" %}</b></a>
		</li>
	{% endif %}
  </ul>


<ul class="navbar-nav" style="float:right">
		{% if user.is_authenticated %}
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" href="{% url 'profile' %}" id="navbardrop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			{% if request.user|has_avatar %}
			{% avatar request.user 50 class="rounded-circle" style="vertical-align: middle"%}
			{% else %}
			<img src="{% static "images/Ernestophone_logo.png" %}"  width="50" height="50" class="rounded-circle"style="vertical-align: middle">
			{% endif %}

						</a>
	        <div class="dropdown-menu" >
	          <a class="dropdown-item" href="{% url 'change_membre' %}">{% trans "Modifier le profil" %}</a>
						 <a class="dropdown-item" href="{% url 'trombonoscope:change' %}">{% trans "Modifier le Trombo" %}</a>
	          <a class="dropdown-item" href="{% url 'logout' %}">{% trans "Déconnexion" %}</a>
	        </div>
	      </li>
				{% else %}
	      <li class="nav-item"><a class="nav-link" href="{% url 'login' %}"><b>{% trans "Se connecter" %}</b></a></li>
	      <li class="nav-item"><a class="nav-link" href="{% url 'registration' %}"><b>{% trans "Créer un compte" %}</b></a></li>

	      {% endif %}
				<li class="nav-item">
					{% ifequal current_language "fr" %}
					<a class="nav-link" href="{% changelang "en" %}" ><img src="{% static 'images\en_flag.jpg' %}" width="60" height="40" style="vertical-align: middle"></a>
					{% else %}
					<a class="nav-link" href="{% changelang "fr" %}" ><img src="{% static 'images\fr_flag.jpg' %}" width="60" height="40" style="vertical-align: middle"></a>
					{% endifequal %}
				</li>
	    </ul>

</div>
</nav>


		<!-- Main -->

      {% block content %}
      {% endblock %}


		<!-- Footer -->
		<footer id="footer" style="background-color:rgb(228, 82, 47);">
			<div class="copyright">
				<ul class="icons">
					<li><a target="_blank" href="https://www.facebook.com/ernestophone"

							class="icon fa-facebook"><span class="label">Facebook</span></a></li>
					<li><a href="mailto:fanfare@ens.fr" class="icon fa-envelope"><span class="label">Mail</span></a></li>
					<li><a target="_blank" href="https://www.youtube.com/channel/UC_RahrdZLoBGpJQHwegV4tQ"

							class="icon fa-youtube-play"><span class="label">Youtube</span></a></li>

							<li><a target="_blank" href="https://www.instagram.com/ernestophone/" class="icon fa-instagram"><span class="label">Instagram</span></a></li>

				</ul>
			</div>
		</footer>

		<!-- Scripts -->

			<script src="{% static 'js/jquery.min.js' %}"></script>
			<script src="{% static 'js/jquery.scrolly.min.js' %}"></script>
			<script src="{% static 'js/skel.min.js' %}"></script>
			<script src="{% static 'js/util.js' %}"></script>
			<script src="{% static 'js/main.js' %}"></script>
			<script src="{% static 'js/InstagramFeed.js' %}"></script>
	  	<script src="{% static 'js/add2calendar.js' %}"></script>

<script>


	const $dropdown = $(".dropdown");
	const $dropdownToggle = $(".dropdown-toggle");
	const $dropdownMenu = $(".dropdown-menu");
	const showClass = "show";

	$(window).on("load resize", function() {

	  if (this.matchMedia("(min-width: 768px)").matches) {
	    $dropdown.hover(
	      function() {
	        const $this = $(this);
	        $this.addClass(showClass);
	        $this.find($dropdownToggle).attr("aria-expanded", "true");
	        $this.find($dropdownMenu).addClass(showClass);
	      },
	      function() {
	        const $this = $(this);
	        $this.removeClass(showClass);
	        $this.find($dropdownToggle).attr("aria-expanded", "false");
	        $this.find($dropdownMenu).removeClass(showClass);
	      }
	    );
	  } else {
	    $dropdown.off("mouseenter mouseleave");
	  }
	});
</script>


			<script type="text/javascript">


    function ouvrirFermerSpoiler(div)
    {
        var divContenu = div.getElementsByTagName('div')[1];


        if(divContenu.style.display == 'block')
            divContenu.style.display = 'none';
        else
            divContenu.style.display = 'block';
    }

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