{% extends 'iconolab_base.html' %}

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

{% block content %}
<div id="homepage-main">
  <div id="main-panel" class="row">
    {% for collection in collections_primary %}
    <div class="col-md-3">
      <div>
        {% thumbnail collection.image "450x250" crop="center" as im %}
        <div>
          <a href="{% url 'collection_home' collection.name %}">
            <img src="{{ im.url }}" class="img-responsive">
          </a>
        </div>
        <h4 class="text-center">{{collection.verbose_name}}</h4>
        <a class="btn btn-default btn-primary btn-block" href="{% url 'collection_home' collection.name %}">
          Contribuer
        </a>
        <hr>
        <p>{{collection.description|safe}}</p>
        {% endthumbnail %}
      </div>
    </div>
    {% 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</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</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 %}