{% extends 'iconolab_base.html' %}

{% load thumbnail %}
{% load iconolab_tags %} 

{% block content %}

    <h2>Recherche</h2>

    <form method="get" action="{% url 'search_indexes:haystack_search' %}">
        <table>
            
            <tr>
                <td> {{ form.as_p }} </td> 

                <td>
                    <input style="margin:0px" type="submit" value="Rechercher">
                </td>
            </tr>
        </table>
    </form>
  <h3><strong>{{ page_obj.paginator.count }}</strong> image(s)</h3>
  <div class="row">
    <div id="list-items" class="col-md-12">
      <ul class="search-image-list-wrapper list-unstyled">
        {% for item in page_obj.object_list %}
          <li class="search-image-list-li container panel panel-default col-md-12">
            <div class="search-image-container row search-image-list-image-container" >
            {% if item.object.images.count > 1 %}
              {% with item.object.images.first as main_image %}
                {% if main_image.height > main_image.width %}
                  <div class="pull-left search-item-links text-center col-md-4" style="display:inline-block; margin: 10px 0px;">
                    {% thumbnail main_image.media "175x300" crop=False as im %}
                      <div class="main-image" style="display:inline-block">
                        <a href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}?show={{secondary_image.image_guid}}">
                          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                        </a>
                      </div>
                    {% endthumbnail %}
                    <div class="secondary-images" style="display:inline-block">
                      {% for secondary_image in item.object.images.all %}
                        {% if secondary_image != main_image and forloop.counter <= 4 %}
                          {% thumbnail secondary_image.media "165x90" crop=False as im %}
                            <div class="secondary-image">
                              <a href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}?show={{secondary_image.image_guid}}">
                                <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                              </a>
                            </div>
                          {% endthumbnail %}
                        {% endif %}
                      {% endfor %}
                    </div>
                  </div>
                {% else %}
                <div class="search-item-links pull-left col-md-4" style="display:inline-block; margin: 10px 0px;">
                    {% thumbnail main_image.media "350x150" crop=False as im %}
                        <div>
                          <a href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}">
                            <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                          </a>
                        </div>
                    {% endthumbnail %}
                    <div class="secondary-images pull-left" style="display:inline-block; margin-top:5px;">
                      {% for secondary_image in item.object.images.all %}
                        {% if secondary_image != main_image and forloop.counter <= 4 %}
                          {% thumbnail secondary_image.media "110x140" crop=False as im %}
                            <div class="secondary-image">
                              <a href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}?show={{secondary_image.image_guid}}">
                                <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                              </a>
                            </div>
                          {% endthumbnail %}
                        {% endif %}
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}
              {% endwith %}
            {% else %}
              {% with item.images.first as main_image %}
                <div class="item-links text-center" style="display:inline-block; margin: 10px 0px;">
                  {% thumbnail main_image.media "350x300" crop=False as im %}
                    <a href="{% url 'item_detail' collection_name item.item_guid %}?show={{main_image.image_guid}}">
                      <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                    </a>
                  {% endthumbnail %}
                </div>
              {% endwith %}
            {% endif %}
            <div class="search-item-info text-left col-md-8" style="display:inline-block; margin: 10px 0px;">
              <div class="object-infos">
               <a class="btn btn-default btn-xs pull-right collection-home-item-btn" href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
              </div>
              <h1><small>Métadonnées de l'objet</small></h1>
              {% if item.object.metadatas.designation %}<h3>Désignation : <small>{{item.object.metadatas.designation}}</small></h3>{% endif %}
              {% if item.object.metadatas.authors %}<h4>Auteur(s) : <small>{{item.object.metadatas.designation}}</small></h4>{% endif %}
              {% if item.object.metadatas.conservation_location %}<h4>Conservé à : <small>{{item.object.metadatas.conservation_location}}</small></h4>{% endif %}
              {% if item.object.metadatas.datation %}<h4>Datation : <small>{{item.object.metadatas.datation}}</small></h4>{% endif %}
              {% if item.object.metadatas.technics %}<h5>Techniques : <small>{{item.object.metadatas.technics}}</small></h5>{% endif %}
              {% if item.object.metadatas.measurements %}<h5>Mesures : {{item.object.metadatas.measurements}}</h5>{% endif %}
              {% if item.object.metadatas.create_or_usage_location %}<h5>Lieu de création/utilisation : <small>{{item.object.metadatas.create_or_usage_location}}</small></h5>{% endif %}
              {% if item.object.metadatas.discovery_context %}<h5>Contexte de découverte : <small>{{item.object.metadatas.discovery_context}}</small></h5>{% endif %}
              {% if item.object.metadatas.photo_credits %}<h5>Crédits photographiques : <small>{{item.object.metadatas.photo_credits}}</small></h5>{% endif %}
              {% if item.object.metadatas.inventory_number %}<h5>Numéro d'inventaire : <small>{{item.object.metadatas.inventory_number}}</small></h5>{% endif %}
            </div>
            </div>
          </li>
        {% endfor %}
      </ul>
      <ul class="pagination pull-right items-perpage" style="margin-left: 15px;">
        <li class="active pagination-label"><a>Objets par page : </a></li>
        <li class="{% if page_obj.paginator.per_page == 5 %}active{% endif %}">
        <a href="?q={{ query }}&perpage=5">5</a>               
        </li>
        <li class="{% if page_obj.paginator.per_page == 10 %}active{% endif %}">
        <a href="?q={{ query }}&perpage=10">10</a>               
        </li>
        <li class="{% if page_obj.paginator.per_page == 25 %}active{% endif %}">
        <a href="?q={{ query }}&perpage=25">25</a>               
        </li>
        <li class="{% if page_obj.paginator.per_page == 100 %}active{% endif %}">
        <a href="?q={{ query }}&perpage=100">100</a>               
        </li>
      </ul>
      {% if page_obj.has_previous or page_obj.has_next %}
        <ul class="pagination pull-right items-pagination">
          {% if page_obj.has_previous %}
          <li>
            <a href="?page={{page_obj.previous_page_number}}&perpage={{page_obj.paginator.per_page}}" aria-label="Précédent">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          {% endif %}
          
          {% for page in page_obj.paginator.page_range %}
            <li id="page-link-{{page}}" class="pagination-link {% if page == page_obj.number %}active{% endif %}">
              <a {% if page != page_obj.number %}href="?q={{query}}&page={{page}}&perpage={{page_obj.paginator.per_page}}"{% endif %}>{{page}}</a>
            </li>
          {% endfor %}
          
          {% if page_obj.has_next %}
          <li>
             <a href="?page={{page_obj.next_page_number}}&perpage={{page_obj.paginator.per_page}}" aria-label="Précédent">
              <span aria-hidden="true">&raquo;</span>
             </a>
          </li>
          {% endif %}
        </ul>
      {% endif %}
    </div>
  </div>
{% endblock %}