{% extends "gestion/base.html" %}
{% load static %}
{% load i18n %}
{% load halflength %}
{% block titre %}{% trans "L'Ernestophone : La fanfare de l'Ecole normale supérieure de Paris" %}{% endblock %}
{% block extrahead %}	<link rel="stylesheet" href="{% static 'css/style.css' %}" />{% endblock %}
{% block content %}

    <!-- Banner -->
    <!--
				To use a video as your background, set data-video to the name of your video without				its extension (eg. images/banner). Your video must be available in both .mp4 and .webm				formats to work correctly.			-->
    <section id="banner" data-video="{% static 'images/banner' %}">
      <video autoplay loop muted>
        <source src= "{% static 'images/banner.mp4' %}" type="video/mp4" /><source src="{% static 'images/banner.webm' %}" type="video/webm" /></video>
      <div class="inner">
        <header>
          <div class="box" style="background-color:rgba(0,0,0,0.15)">
          <h1>{% trans "L'Ernestophone" %}</h1>
          <p>{% trans "La fanfare de l'Ecole normale supérieure de Paris" %}</p>
        </div>
        </header>
        <a href="{% url 'home' %}#main" class="button big alt scrolly">{% trans "Découvrez nous !" %}</a> </div>
    </section>
    <!-- Main -->
    <div id="main" style="background-color:rgb(228, 82, 47);">
      <!-- One -->
      <section class="wrapper style1" >
        <div class="inner">
          <header class="align-center">
            <h2>{% trans "Notre mantra : répandre la fanfaronnerie" %}</h2>
            <p style="color:white">{% blocktrans %}Que ce soit à l'ENS, dans la rue ou lors de
              votre évènement, nous sommes là pour répandre notre bonne humeur <br>
              grâce à notre énergie et notre répertoire oscillant entre pop et
              brass band.{% endblocktrans %}</p>
          </header>

          <!-- Carousel row -->
          <div class="top-content">
          <div class="container_carousel">
<div class="row">
    <div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">
          <!-- Carousel -->
          {% if videos %}
          <div id="carousel" class="carousel slide">
        <ol class="carousel-indicators">
          {% for v in videos %}
          {% if forloop.first %}
          <li data-target="#carousel" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
          {% else %}
          <li data-target="#carousel" data-slide-to="{{ forloop.counter0 }}"></li>
          {% endif %}
          {% endfor %}
        </ol>
        <div class="carousel-inner">
          {% for v in videos %}
          {% if forloop.first %}
          <div class="carousel-item active">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="{{ v.url }}" allowfullscreen></iframe>
            </div>
          </div>
          {% else %}
          <div class="carousel-item">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="{{ v.url }}" allowfullscreen></iframe>
            </div>
          </div>
        {% endif %}
          {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
        </div>
        </div>
        </div>
        </div>
        </div>
        {% endif %}
          <!-- End carousel -->


          </div>

      </section>
      <!-- Two -->
      <section class="wrapper style2" >

        <div class="inner" id="contact">
          <header>
            <h2>{% trans "L'Ernestophone in a nutshell" %}</h2>
            <div id="instagram-feed" class="instagram_feed"> </div>
            <p style="color:white">{% blocktrans %}L'Ernestophone, c'est la fanfare de l'École
              normale supérieure, (re)créée en septembre 2011, pour le plus
              grand bonheur des petits. Et des grands.{% endblocktrans %}</p>
          </header>
          <!-- Tabbed Video Section -->
          <div class="flex flex-tabs">
            <ul class="tab-list">
              <li><a href="#" data-tab="tab-1" >{% trans "Notre répertoire" %}</a></li>
              <li><a href="#" data-tab="tab-2">{% trans "Rejoins-nous !" %}</a></li>
              <li><a href="#" data-tab="tab-3" class="active">{% trans "Nous contacter !" %}</a></li>
            </ul>
            <div class="tabs">
              <!-- Tab 1 -->
              <div class="tab tab-1 flex flex-3">

<h4>{% trans "Notre répertoire actuel" %} :</h4>
                <div class="row">

                  {% for category in categories %}
                  {%if forloop.first %}


                          <div class="6u 12u$(small)">
                            <div class="table-wrapper">
                              <table class="default">
                                <thead>
                                  <tr>
                                    <th>{% trans "Morceau" %}</th>
                                    <th>{% trans "Compositeur" %}</th>
                                  </tr>
                                </thead>
                                  <tbody>
                                    <tbody>
                                      {% with rep=category.partitionset_set.all %}
                                      {% with rep_half_length=rep|half_length %}
                                      {% for partition in rep %}

                                      <tr>
                                        <td>  {{ partition.nom }} </td>
                                        <td> {{ partition.auteur }} </td>
                                      </tr>


                                      {% if forloop.counter == rep_half_length %}

                                    </tbody>
                                </table>
                              </div>
                            </div>
                                      <div class="6u 12u$(small)">
                                        <div class="table-wrapper">
                                          <table class="default">
                                            <thead>
                                              <tr>
                                                <th>{% trans "Morceau" %}</th>
                                                <th>{% trans "Compositeur" %}</th>
                                              </tr>
                                            </thead>
                                              <tbody>
                                                  {% endif %}
                                      {% endfor %}
                                      {% endwith %}
                                      {% endwith %}
                                  </tbody>
                              </table>
                            </div>
                          </div>

                          {% endif %}
                  {% endfor %}
                    <a href="{% url 'partitions:liste' %}" class="button alt fit" >{% trans "Voir le répertoire présent et passé" %}</a>
            <span class="image fit">
              {% if photo_rep %}
              <img src="{{photo_rep.image.url}}" alt="" />  <div style="position:absolute;z-index:1;right:0;bottom:0">
              {% if photo_rep.url %}
              <a href="{{photo_rep.url}}" target="_blank" class="icon fa-copyright" style="color: {{photo_rep.color}}"> {% if photo_rep.auteur %}{{photo_rep.auteur}}{%endif%}</a>
              {% elif photo_rep.auteur %}
              <div class="icon fa-copyright" style="color: {{photo_rep.color}}" > {{photo_rep.auteur}}</div>
              {% endif %}
              </div>
              {% else %}
  <img src="{% static 'images/repertoire.jpg' %}" alt="" />
  <div style="position:absolute;z-index:1;right:0;bottom:0">
  <div class="icon fa-copyright"> Lucas Gierzack</div>
</div>
{% endif %}
</span>

            </div>

              </div>
              <!-- Tab 2 -->
              <div class="tab tab-2 flex flex-3">
                	<div class="box">
                    <div class="row">
                      <div class="7u 12u$(small)">
                        <p style="color:white" align="center">
                        {% blocktrans %}La fanfare c'est un savant mélange entre la claire trompette, le tonitruant trombone, la famille des saxophones (le Baryton alias le grand père, le Ténor l'oncle foufou et l'Alto le petit dernier), la pimpante clarinette, le truculent piccolo, l'honorable euphonium, les puissantes percussions et le fameux soubassophone !!<br>
                        Nous répétons tous les mardis et jeudi soirs de 20h à 22h dans les sous sols du NIR à l'ENS. <br>Fanfaron débutant ou musicien aguerri, n'hésite pas à venir nous rejoindre !
                        Nous serons heureux de te compter dans nos rangs !<br>
                        Nous prêtons des instruments à tout membre du COF souhaitant découvrir les joies de la fanfaronnerie !{% endblocktrans %}</p>
                        <p align="center">{% blocktrans %}Pour un petit aperçu du fun qu'on peux avoir n'hésites pas à consulter notre {% endblocktrans %}<a class="text" href="https://heyzine.com/flip-book/b2cf4809b7.html" target="_blank">year book</a></p>
                      </div>
                      <div class="5u 12u$(small)"><div>
                        <span class="image fit">
                          {% if photo_join %}
                          <img src="{{photo_join.image.url}}" alt="" />  <div style="position:absolute;z-index:1;right:0;bottom:0">
                          {% if photo_join.url %}
                          <a href="{{photo_join.url}}" target="_blank" class="icon fa-copyright" style="color: {{photo_join.color}}"> {% if photo_join.auteur %}{{photo_join.auteur}}{%endif%}</a>
                          {% elif photo_join.auteur %}
                          <div class="icon fa-copyright" style="color: {{photo_join.color}}" > {{photo_join.auteur}}</div>
                          {% endif %}
                          </div>
                          {% else %}
                          <img src="{% static 'images/join.jpg' %}" alt="" />
                        <div style="position:absolute;z-index:1;right:0;bottom:0">
                        <a href="https://evarin.fr/" target="_blank" class="icon fa-copyright"> Evarin</a>
                      </div>
                      {% endif %}
                      </span>
                    </div>
                      </div>
                    </div>

                <p align="center"> {% blocktrans %} Demande à être inscrit sur <a class="text" href="mailto:fanfare@ens.fr">la mailing liste </a>pour recevoir les dernières infos de nos bien aimé.e.s chef.fe.s !{% endblocktrans %}</p>
              </div>
              </div>
              <!-- Tab 3 -->
              <div class="tab tab-3 flex flex-3 active">
	<div class="box">
                 <div><span class="image right">
                   {% if photo_contact %}
                   <img src="{{photo_contact.image.url}}" alt="" />  <div style="position:absolute;z-index:1;right:0;bottom:0">
                   {% if photo_contact.url %}
                   <a href="{{photo_contact.url}}" target="_blank" class="icon fa-copyright" style="color: {{photo_contact.color}}"> {% if photo_contact.auteur %}{{photo_contact.auteur}}{%endif%}</a>
                   {% elif photo_contact.auteur %}
                   <div class="icon fa-copyright" style="color: {{photo_contact.color}}" > {{photo_contact.auteur}}</div>
                   {% endif %}
                   </div>
                   {% else %}
                  <img src="{% static 'images/contact.jpg' %}" alt=""/>
                  <div style="position:absolute;z-index:1;right:0;bottom:0">
                  <a href="https://evarin.fr/" target="_blank" class="icon fa-copyright"> Evarin</a>
                </div>
                {% endif %}
              </span></div><p style="color:white" align="center">{% blocktrans %}Vous préparez un
                  évenement et vous recherchez une fanfare dynamique ? N'hésitez
                  pas à nous envoyer un message par mail ou sur Facebook. Nous serons ravis de venir
                  fanfaronner pour vous !! Vérifiez notre{% endblocktrans %} <a href="{% url 'calendrier:liste' %}" class="text">{% trans "agenda" %}</a>. <br />

                    <a target="_blank" href="https://www.facebook.com/ernestophone"

                        class="icon fa-facebook fa-5x"><span class="label">Facebook</span></a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="mailto:fanfare@ens.fr" class="icon fa-envelope fa-5x "><span

                          class="label">Mail</span></a>
                          &nbsp;
                          &nbsp;
                          &nbsp;
                          &nbsp;

                    <a target="_blank" href="https://www.youtube.com/channel/UC_RahrdZLoBGpJQHwegV4tQ"

                        class="icon fa-youtube-play fa-5x"><span class="label">Youtube</span> </a> &nbsp;
                          &nbsp;
                      	<a target="_blank" href="https://www.instagram.com/ernestophone/" class="icon fa-instagram fa-5x"><span class="label">Instagram</span></a>
                </p>
  </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <script src="{% static 'js/InstagramFeed.min.js' %}"></script>

    <script>
        (function(){
            new InstagramFeed({
                'username': 'ernestophone',
                'container': "#instagram-feed" ,
                'display_profile': false,
                'display_biography': false,
                'display_gallery': true,
                'display_captions': true,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 8,
                'margin': 1
            });
        })();
    </script>
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/jquery-migrate-3.0.0.min.js' %}"></script>
      <script src="{% static 'js/popper.min.js' %}"></script>
      <script src="{% static 'js/bootstrap_carousel.min.js' %}"></script>
        <script src="{% static 'js/jquery.backstretch.min.js' %}"></script>
        <script src="{% static 'js/wow.min.js' %}"></script>
        <script src="{% static 'js/waypoints.min.js' %}"></script>
        <script src="{% static 'js/scripts.js' %}"></script>
{% endblock %}
