{% 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;">
    <h1 class="text-center"><small>Projet</small> Iconolab</h1>
  </div>
  {% for collection in collections.all %}
  <div id="collection-panel-{{collection.name}}" class="container collection-container panel panel-default" 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 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 %}
  <div class="collection-navbar text-center">
    <h4>Les fonds d'images du projet 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 btn-collection" @click="pickCollection('{{collection.name}}')">{{collection.verbose_name}}</div></li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock %}

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