{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% block content %}
  <div class="collection-summary" class="row">
    <div class="col-md-3">
      {% thumbnail collection.image "300x300" crop=False as im %}
        <img src="{{ im.url }}" class="img-responsive">
      {% endthumbnail %}
      <hr>
      <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>
      <p>
        {{ collection.description | safe }}
      </p>
      {% with folders_count=collection.folders.count %}
      {% if folders_count > 0 %}

        <h3>{{ folders_count }} dossier{% if folders_count > 1 %}s{% endif %}</h3>
        <ul class="list-unstyled">
        {% for folder in collection.folders.all %}
          <li class="collection-folder">
            <p class="text-center">
              {% if folder_guid == folder.folder_guid|slugify %}
              <a href="{% url 'collection_home' collection_name %}">
                <i class="fa fa-close"></i> {{ folder.name }}
              </a>
              {% else %}
              <a href="{% url 'collection_home' collection_name %}?folder={{ folder.folder_guid|slugify }}">
                <i class="fa fa-folder"></i> {{ folder.name }}
              </a>
              {% endif %}
            </p>
            <div>
            {% thumbnail folder.image "250x250" crop=False as folder_image %}
              <a href="{% if folder_guid == folder.folder_guid|slugify %}{% url 'collection_home' collection_name %}{% else %}{% url 'collection_home' collection_name %}?folder={{ folder.folder_guid|slugify }}{% endif %}">
                <img src="{{ folder_image.url}}" width="100%" />
              </a>
            {% endthumbnail %}
            </div>
            {% with items_nb=folder.items_nb %}
            <p class="text-center">{{ items_nb }} élément{% if items_nb > 1 %}s{% endif %}</p>
            {% endwith %}
          </li>
        {% endfor %}
        </ul>
      {% endif %}
      {% endwith %}
    </div>
    <div class="col-md-9">
      <h1>{{ collection.verbose_name }} <small>Fonds Iconolab</small></h1>

      {% if folder_guid %}
      <p>
        <a href="{% url 'collection_home' collection_name %}">
          <i class="fa fa-close"></i> {{ folder_name }}
        </a>
      </p>
      {% endif %}

      {% if not folder_guid and contributions_pagination_data.list %}
        <h3>Appels à contribution</h3>
        {% for annotation in contributions_pagination_data.list %}
        <div class="row">
          <div class="col-md-4">
            <div class="fragment-container" style="position: relative">
              {% thumbnail annotation.image.media "250x250" crop=False as im %}
                <a href="{% url 'annotation_detail' 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 }}</h4>
            <p>
            {% for contributor in annotation.stats.contributors.all %}
              {{ contributor }}
            {% endfor %}
            </p>
            <p>{{ annotation.current_revision.description }}</p>
            {% for tagging_info in annotation.current_revision.tagginginfo_set.all %}
              <p>
                <span class="label label-default"><i class="fa fa-tag"></i> {{ tagging_info.tag.label }}</span>
                <span><i class="fa fa-exclamation-triangle"></i> {{ tagging_info.accuracy }}</span>
                <span><i class="fa fa-crosshairs"></i> {{ tagging_info.relevancy }}</span>
              </p>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      {% endif %}

      <ul class="nav nav-tabs" role="tablist">
        <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}">
          <a href="#list-items" role="tab" data-toggle="tab">Objets du fonds</a>
        </li>
        <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}">
          <a href="#list-revised" role="tab" data-toggle="tab">Annotations les plus révisées</a>
        </li>
        <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}">
          <a href="#list-recent" role="tab" data-toggle="tab">Annotations récentes</a>
        </li>
      </ul>

      <div class="tab-content">

        <div id="list-recent" role="tabpanel" class="tab-pane {% if active_list == 'recent' %}active{% endif %}">
          {% include "partials/image_annotations_list.html" with annotation_list=recent_pagination_data.list %}
          {% if recent_list %}
            {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
          {% endif %}
        </div>
        <div id="list-revised" role="tabpanel" class="tab-pane {% if active_list == 'revised' %}active{% endif %}">
          {% include "partials/image_annotations_list.html" with annotation_list=revised_pagination_data.list %}
          {% if revised_list %}
            {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
          {% endif %}
        </div>
        <div id="list-items" role="tabpanel" class="tab-pane {% if active_list == 'items' %}active{% endif %}">
          <div class="item-grid">
            {% for item in items_pagination_data.list %}
            <div class="item-grid-item">
              {% include "partials/item_images_preview.html" with item=item %}
            </div>
            {% endfor %}
          </div>

          <div id="pagination" class="text-center">
            {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
          </div>

        </div>

      </div>

    </div>
  </div>
  <div class="modal fade" id="bookmark-modal" tabindex="-1" role="dialog" aria-labelledby="bookmark-modal-label">
    <form method="post" class="form-horizontal" action="{% url 'image_bookmark' collection_name ':image_guid' %}">
      {% csrf_token %}
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="bookmark-modal-label">Ajouter à mes favoris</h4>
          </div>
          <div class="modal-body">
              <div class="form-group">
                <label class="col-sm-2 control-label">Objet</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control bookmark-title" disabled="disabled" value="">
                </div>
              </div>
              <div class="form-group bookmark-folder">
                <label for="bookmark_folder" class="col-sm-2 control-label">Dossier</label>
                <div class="col-sm-10">
                  <select class="form-control" name="{{ bookmark_form.bookmark_category.name }}">
                    {% for category_id, category_name in bookmark_form.bookmark_category.field.choices %}
                    <option value="{{ category_id }}">{{ category_name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="form-group bookmark-folder-new" style="display: none;">
                <label for="bookmark_folder" class="col-sm-2 control-label">Nouveau dossier</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="{{ bookmark_form.bookmark_category_new.name }}">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button class="btn btn-sm btn-default bookmark-folder-add">Ajouter un dossier</button>
                  <button class="btn btn-sm btn-default bookmark-folder-cancel" style="display: none;">Annuler</button>
                </div>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
            <button type="submit" class="btn btn-primary">Valider</button>
          </div>
        </div>
      </div>
    </form>
  </div>
{% endblock %}

{% block footer_js %}
<script>
var $modal = $('#bookmark-modal');

function toggleAddFolder(e) {
  e.preventDefault();
  $modal.find('.bookmark-folder-new').toggle();
  $modal.find('.bookmark-folder-cancel').toggle();
  $modal.find('.bookmark-folder-add').toggle();
  $modal.find('.bookmark-folder').toggle();
}

$modal.find('.bookmark-folder-add').on('click', toggleAddFolder);
$modal.find('.bookmark-folder-cancel').on('click', toggleAddFolder);

$('.bookmark').on('click', function(e) {
  e.preventDefault();

  var $target = $(e.currentTarget);

  if ($target.hasClass('active')) {
    return;
  }

  $modal.find('.bookmark-title').val($target.data('item'));
  $modal.find('.bookmark-image').val($target.data('image-id'));

  var $form = $modal.find('form');
  $form.attr('action', $form.attr('action').replace(':image_guid', $target.data('image-guid')));

  $modal.modal();

});
</script>
{% endblock %}