{% extends 'iconolab_base.html' %}

{% load i18n %}
{% load staticfiles %}
{% load thumbnail %}
{% load iconolab_tags %}

{% block content %}

{% for collection in collections.all %}
<div id="collection-panel-{{collection.name}}" class="container collection-container panel panel-default {% if forloop.first %}selected{% endif %}" style="padding-top: 15px; padding-bottom: 15px;">
  <div class="row">
    <div class="col-md-4">
      {% thumbnail collection.image "350x350" crop=False as im %}
        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
      {% endthumbnail %}
    </div>
    <div class="col-md-8">
      <h1 class="collection-title" style="margin-top:0px;"><small>Fonds Iconolab</small> {{ collection.verbose_name }}</h1>
      <p class="text-justify"> {{collection.description | safe}} </p>
      <a href="{% url 'collection_home' collection.name %}" class="btn btn-default btn-sm">Contribuer au fonds {{collection.verbose_name}}</a>
    </div>
  </div>
</div>
{% endfor %}
<div class="collection-navbar text-center">
  <h4>Les autres fonds dans Iconolab</h4>
  <ul class="list-inline list-unstyled">
    {% for collection in collections.all %}
      <li><div id="show-collection-{{collection.name}}" class="btn btn-default btn-xs {% if forloop.first %}btn-primary{% endif %} btn-collection">{{collection.verbose_name}}</div></li>
    {% endfor %}
  </ul>
</div>
{% endblock %}

{% block footer_js %}
<script>
  $(".collection-container:not(.selected)").hide();
  var selectedContainerId = $(".collection-container.selected").attr("id");
  if(selectedContainerId) {
      var selectedID = /collection\-panel\-([0-9a-z\-]+)/.exec($(".collection-container.selected").attr("id"))[1];
      $(".btn-collection").on("click", function(e){
	    selectedID = /show\-collection\-([0-9a-z\-]+)/.exec($(this).attr("id"))[1];
		if (!$(this).hasClass("btn-primary")){
		    $(".collection-container").removeClass("selected");
		    $(".collection-container:not(.selected)").hide();
		    $(".btn-collection").removeClass("btn-primary")
		    $(this).addClass("btn-primary")
		    $(".collection-container#collection-panel-"+selectedID).show()
		    $(".collection-container#collection-panel-"+selectedID).addClass("selected")
		}
	});
  }

</script>
{% endblock %}