{% load thumbnail %}

<div class="item-image-container">
  {% if item.images.count > 1 %}
    {% with item.images_sorted_by_name.first as main_image %}
      {% if main_image.wh_ratio < 1.3  %}
        <div class="item-links-portrait text-center" style="display:inline-block; margin: 10px 0px;">
          {% thumbnail main_image.media "250x250" crop=False as im %}
          <div class="main-image" style="display:inline-block">
            <a href="{% url 'item_detail' item.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>
          </div>
          {% endthumbnail %}
          <div class="secondary-images-container secondary-images-portrait" style="display:inline-block; margin: 10px">
            {% for secondary_image in item.images.all %}
              {% if secondary_image != main_image and forloop.counter <= 4 %}
                {% thumbnail secondary_image.media "100x100" crop=False as im %}
                  <div class="secondary-image-portrait">
                    <a href="{% url 'item_detail' item.collection.name item.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="item-links-landscape text-center">
          {% thumbnail main_image.media "250x250" crop=False as im %}
          <div class="main-image" style="display:inline-block">
            <a href="{% url 'item_detail' item.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>
          </div>
          {% endthumbnail %}
          <div class="secondary-images-container secondary-images-landscape" style="margin: 10px">
            {% for secondary_image in item.images.all %}
              {% if secondary_image != main_image and forloop.counter <= 3 %}
                {% thumbnail secondary_image.media "100x100" crop=False as im %}
                  <div class="secondary-image-landscape pull-left" style="display:inline-block">
                    <a href="{% url 'item_detail' item.collection.name item.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 "250x250" crop=False as im %}
          <a href="{% url 'item_detail' item.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>