{% extends 'iconolab_base.html' %}

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

{% block content %}
<div id="homepage-main" class="row">
  <div id="main-panel" class="container" style="padding-top: 15px; padding-bottom: 15px;">
    {% for collection in collections_primary %}
      {% if not forloop.counter|divisibleby:2 %}
        <div class="row" style="margin-bottom:25px;">
          <div class="col-md-1"></div>
      {% endif %}
            <div class="col-md-5">
              {% thumbnail collection.image "450x350" crop="center" as im %}
                <div class="home-main-button-container">
                  <a class="btn btn-default btn-primary btn-lg home-main-button" href="{% url 'collection_home' collection.name %}">{{collection.verbose_name}}</a>
                </div>
                <div>
                  <a href="{% url 'collection_home' collection.name %}">
                    <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
                  </a>  
                </div>
              {% endthumbnail %}
            </div>
      {% if forloop.counter|divisibleby:2 %}
          <div class="col-md-1"></div>
          </div>
      {% elif forloop.last %}
        </div>
      {% endif %}
    {% endfor %}
  </div>
  {% for collection in collections_secondary %}
  <div id="collection-panel-{{collection.name}}" class="container collection-container panel panel-default">
    <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">
        <ul class="list-inline list-unstyled pull-right">
          <li><div id="show-main-collections" class="btn btn-default btn-xs btn-collection" @click="showMainPanel()">Retour page principale</div></li>
        </ul>
        <h1 class="collection-title"><small>Fonds Iconolab</small> {{ collection.verbose_name }}</h1>
        <p id="collection-description-short-{{collection.name}}" class="text-justify collection-description"> 
          {{collection.description | safe}} 
          {% if collection.complete_description %}<a id="show-complete-{{collection.name}}" class="show-complete-link" @click="showCompleteDescription('{{collection.name}}')"> Voir plus</a></p>{% endif %}
        </p>
        <p id="collection-description-complete-{{collection.name}}" class="text-justify collection-description-complete">
          {{collection.complete_description | safe}} 
          <a id="hide-complete-{{collection.name}}" class="hide-complete-link" @click="hideCompleteDescription('{{collection.name}}')"> Voir moins</a>
        </p>
        <a href="{% url 'collection_home' collection.name %}" class="btn btn-default btn-sm">Contribuer</a>
      </div>
    </div>
  </div>
  {% endfor %}
  {% if collections_secondary %}
  <div class="collection-navbar text-center">
    <h4>Les autres fonds d'images du projet Iconolab</h4>
    <ul class="list-inline list-unstyled">
      {% for collection in collections_secondary %}
        <li><div id="show-collection-{{collection.name}}" class="btn btn-default btn-xs btn-collection" @click="pickOtherCollection('{{collection.name}}')">{{collection.verbose_name}}</div></li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block footer_js %}
<script>
	_v = new Vue(iconolab.CollectionSelector);
	_v.$mount("#homepage-main");
</script>
{% endblock %}