{% extends 'iconolab_base.html' %}

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

{% block content %}
<div id="homepage-main">
  <div class="alert alert-warning" role="alert">
    <p><strong>Bienvenue sur iconolab. La plateforme
    est actuellement en cours de développement.</strong></p>
    <p>La première phase d'expérimentation démarrera mi-mars 2017. Pour plus d'informations, prière de contacter <a href="mailto:{{ contact }}">{{ contact }}</a>.</p>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h3>Les collections</h3>
    </div>
  </div>
  <div id="main-panel" class="row">

    {% for collection in collections_primary %}
    <div class="col-md-3">
      <div class="home-collection">
        {% 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 class="home-collection-description" title="{{collection.description|safe}}">{{collection.description|safe}}</p>
        {% endthumbnail %}
      </div>
    </div>
    {% endfor %}
  </div>
  <div class="row">
    <div class="col-md-6">
      <h3>Les dernières annotations</h3>
      {% for annotation in latest_annotations %}
      <div class="panel panel-default">
        <div class="panel-body">

          <div class="row">
            <div class="col-md-4">
              <div class="fragment-container" style="position: relative">
                {% thumbnail annotation.image.media "100x100" crop=False as im %}
                  <a href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}">
                    <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                    <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
                      <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
                        <path d="{{ annotation.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                      </g>
                    </svg>
                  </a>
                {% endthumbnail %}
              </div>
            </div>
            <div class="col-md-8">

              <h4>
                {{ annotation.current_revision.title }}
                <small class="pull-right">{{ annotation.current_revision.created|naturaltime }}</small>
              </h4>
              <p>
                {% for contributor in annotation.stats.contributors %}
                <a href="{% url 'user_home' contributor.username %}">{{ contributor.username }}</a>
                {% endfor %}
              </p>
              <p>{{ annotation.current_revision.description }}</p>
              <p>
                {% for tagging_info in annotation.current_revision.tagginginfo_set.all %}
                <span class="label label-default"><i class="fa fa-tag"></i> {{ tagging_info.tag.label }}</span>
                {% endfor %}
              </p>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="col-md-6">
      <h3>Les meilleurs contributeurs</h3>
      <ul class="list-group">
      {% for best_contributor in best_contributors %}
        <li class="list-group-item">
          <span class="badge">{{ best_contributor.contributions }}</span>
          <a href="{% url 'user_home' best_contributor.author.username %}">{{ best_contributor.author.username }}</a>
        </li>
      {% endfor %}
      </ul>

      <h3>Les mots-clé les plus pertinents</h3>
      <ul class="list-group">
        {% for most_accurate_tag in most_accurate_tags %}
        <li class="list-group-item">
          <span class="badge">{{ most_accurate_tag.annotation_count }}</span>
          <a href="{% url 'search_indexes:model_search' 'annotations' %}?q={{ most_accurate_tag.tag.label }}">
            {{ most_accurate_tag.tag.label }}
          </a>
        </li>
        {% endfor %}
      </ul>

    </div>
  </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"><a href="{% url 'collection_home' collection.name %}">{{collection.verbose_name}}</a></div></li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}
</div>
{% endblock %}

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