{% load submission %}
{% load static %}

{% collection_items items collection_name as collection %}
<div id="sel_{{ section.name }}_{{ collection_name }}"
     class="item-selector-section">
  <div class="item-selector" data-refs="{{ refs.0|join_ids:' ' }}">
    <div class="item-thumb-container">
    {% for item in collection %}
      <div class="item-thumbnail" data-id="{{ item|underscore:'id' }}">
      {% with thumb=item|underscore:'artifact_url' referenced_file=refs.1 %}
        {% if thumb %}
          <img src="{{ thumb }}">
        {% elif referenced_file %}
          {% with meta=item|underscore:'filemeta' %}
          {% if meta.type == 'audio' %}
            <img src="{% static "img/rp_icons/audio.png" %}">
          {% else %}
            <img src="{% static "img/rp_icons/generic.png" %}">
          {% endif %}
          {% endwith %}
        {% else %}
          <div class="item-label">item {{ forloop.counter }}</div>
        {% endif %}
      {% endwith %}
      </div>
    {% endfor %}
    </div>
  </div>
  
  <button class="thumb-advance thumb-advance-left" type="button">
    <svg class="advancer-icon" viewBox="0 0 551 1024">
      <path d="M445.44 38.183L-2.53 512l447.97 473.817
               85.857-81.173-409.6-433.23v81.172l409.6-433.23L445.44 38.18z">
    </svg>
  </button>
  <button class="thumb-advance thumb-advance-right" type="button">
    <svg class="advancer-icon" viewBox="0 0 551 1024">
      <path d="M105.56 985.817L553.53 512 105.56 38.183l-85.857
               81.173 409.6 433.23v-81.172l-409.6 433.23 85.856 81.174z">
    </svg>
  </button>
</div>
