{% extends "common_files/base.html" %}

{% block description %}Site de la musique de Meyenheim{% endblock %}

{% block titre %}Évènements{% endblock %}

{% load static %}

{% block extra_head %}
<link href="{% static "timeline/timeline.css" %}" rel="stylesheet">

<style>
    @media (min-width: 768px) {
        .navbar-default .nav > li > a,
        .navbar-default .nav > li > a:focus {
            color: #222222;
        }
        .navbar-default .nav > li > a:hover,
        .navbar-default .nav > li > a:focus:hover {
            color: #F05F40;
        }
    }
    
    .timeline-body > a > img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 15px;
    }
    
</style>
{% endblock %}

{% block contenu %} 
  {% if liste_evenements %}

  {% for evenement in liste_evenements %}

    {% ifchanged evenement.annee evenement.evenement_passe %}

    {% if not forloop.first %}
        </ul>
        </div>
    </section>
    {% endif %}

    <section id="timeline">
        <div class="container">

        {% ifchanged evenement.evenement_passe %}
        <div class="page-header">
          <h1 id="timeline">{{ evenement.evenement_passe | yesno:"Évènements passés, Evènements à venir" }}</h1>
        </div>
        {% endifchanged %}

        {% ifchanged evenement.annee evenement.evenement_passe %}
        <h2>{{ evenement.annee }}</h2>
        {% endifchanged %}

        <ul class="timeline">

    {% endifchanged %}

          <li class="{% cycle 'timeline-inverted' 'timeline' %}">
              <div class="timeline-badge info"><i class="glyphicon {% cycle 'glyphicon-menu-right' 'glyphicon-menu-left' %}"></i></div>
              <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">{{ evenement.titre }}</h4>
                  <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>{{ evenement.date }}</small></br>
                  <small class="text-muted"><i class="glyphicon glyphicon-time"></i>{{ evenement.heure_debut }} - {{ evenement.heure_fin }}</small></br>
                  <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>{{ evenement.lieu }}</small></p>
                  </div>
                  <div class="timeline-body">
                    {% if evenement.illustration_set.count > 1 %}
                      <div id="carousel-{{ forloop.counter }}" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                          {% for illustration in evenement.illustration_set.all %}
                          <div class="item{% if forloop.first %} active{% endif %}">
                              <a href="#pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" data-toggle="modal">
                                <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
                              </a>
                            </div>
                          {% endfor %}
                        </div>

                        <a class="left carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                      </div>

                      <hr>

                      <p>{{ evenement.description }}</p>

                      {% for illustration in evenement.illustration_set.all %}
                        <div id="pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="modal fade">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-body">
                                <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
                              </div>
                            </div>
                          </div>
                        </div>
                      {% endfor %}
                    {% else %}
                      {% with evenement.illustration_set.all|first as illustration %}
                      <a href="#pop_timeline_{{ forloop.counter }}" data-toggle="modal">
                        <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
                      </a>

                      <hr>

                      <p>{{ evenement.description }}</p>

                      <div id="pop_timeline_{{ forloop.counter }}" class="modal fade">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-body">
                              <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
                            </div>
                          </div>
                        </div>
                      </div>
                      {% endwith %}
                    {% endif %}
                  </div>
              </div>
          </li>

    {% if forloop.last %}

        </ul>
        </div>
    </section>

    {% endif %}

  {% endfor %}

  {% endif %}

  {% include "common_files/contact.html" %}

  <script>
  window.onload = function(){$('.carousel').each(function(){
      var items = $(this).find(".item"),
          heights = [],
          tallest;

      if (items.length) {
          function normalizeHeights() {
              items.each(function() { //add heights to array
                  heights.push($(this).height());
              });
              tallest = Math.max.apply(null, heights); //cache largest value
              items.each(function() {
                  $(this).css('min-height',tallest + 'px');
              });
          };
          normalizeHeights();

          $(window).on('resize orientationchange', function () {
              tallest = 0, heights.length = 0; //reset vars
              items.each(function() {
                  $(this).css('min-height','0'); //reset min-height
              });
              normalizeHeights(); //run it again
          });
      }
  })}
  </script>
{% endblock %}