{% extends 'iconolab_base.html' %}

{% load i18n %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% load humanize %}

{% block content %}

<div id="homepage-main">

  <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>

        <div class="progress">

          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"

            aria-valuenow="{{ collection.completed_percent }}" aria-valuemin="0" aria-valuemax="100"

            style="width: {{ collection.completed_percent }}%;">

            {{ collection.completed_percent }}%

          </div>

        </div>

        <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.all %}

                <a href="{% url 'user_home' slug=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 }}&tags=1">

            {{ 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">

        <h3 class="collection-title">{{ collection.verbose_name }}</h3>

        <p id="collection-description-short-{{collection.name}}" class="text-justify collection-description">

          {{collection.description | safe}}

        </p>

        <a href="{% url 'collection_home' collection.name %}" class="btn btn-primary btn">Contribuer</a>

      </div>

    </div>

  </div>

  {% endfor %}

</div>

{% endblock %}