{% extends "slideshow.html" %}
{% block items %}
  <ul data-slideshow-items class="apos-marquee-items">
    {% for file in item._items %}
      {% if ((loop.index0 < options.limit) or (not options.limit)) %}
        {# Make the first image initially current #}
        <li data-slideshow-item class="apos-marquee-item {% if loop.first %}apos-current apos-first {% endif %}{% if loop.last %}apos-last {% endif %}" style="background-image:url({{ aposFilePath(file, { size: size, crop: item.crop }) }});">
          <img class="apos-marquee-image" alt="{{file.title | e }}" data-image src="{{ aposFilePath(file, { size: size, crop: item.crop }) }}" />
          {% if (item.showDescriptions and file.description) or file.hyperlink or (item.showTitles and file.title) %}
          <div class="apos-marquee-description-container{% if not file.hyperlink %} no-link {% endif %}">
            {% if item.showTitles and file.title %}<h1 class="apos-marquee-title">{{ file.title | e }}</h1>{% endif %}
            {% if item.showDescriptions and file.description %}
              <div class="apos-marquee-description">
                <p>
                  {# Don't render HTML tags, do respect line breaks #}
                  {{ file.description | e | nlbr }}
                </p>
              </div>
            {% endif %}
            {% if file.hyperlink %}
              <a href="{{ file.hyperlink }}" class="apos-button apos-marquee-clickthru">
                {% if file.hyperlinkTitle %}
                  {{ file.hyperlinkTitle }}
                {% else %}
                  View Details
                {% endif %}
              </a>
            {% endif %}
          </div>
          {% endif %}
          {% if item.showCredits and file.credit %}
            <div class="apos-marquee-credit">
              {{ file.credit }}
            </div>
          {% endif %}
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endblock %}