{% comment %}
A list of a Tweet's Media objects (ie, photo, GIF or video).

Expects:

 * tweet, the Tweet object.
 * view, 'list' (a generic list), 'day' or 'detail'.

{% endcomment %}

{% if tweet.media_count > 0 %}
    {% load l10n %}

    {% with media_list=tweet.media.all %}

        {% if media_list|length > 1 and view != 'detail' %}

            {% comment %}
                Multiple Photos, and not the Tweet's detail view.

                This assumes that if there are multiple items then they're
                photos, and there will be a maximum of 4.
                This is true as of 2016-05-07...
            {% endcomment %}

            <ul class="list-unstyled row">
                {% for media in media_list %}
                    <li class="col-sm-3 mb-3">
                        <a href="{{ tweet.get_absolute_url }}" title="See only this tweet"><img src="{{ media.small_url }}" width="{{ media.small_w|unlocalize }}" height="{{ media.small_h|unlocalize }}" class="img-fluid" alt="Photo thumbnail"></a>
                    </li>
                {% endfor %}
            </ul>

        {% else %}

            <ul class="list-unstyled mb-0">
                {% for media in media_list %}

                    <li class="mb-3">
                        {% if media.media_type == 'photo' %}

                            {% if view == 'detail' %}
                                <a href="{{ media.large_url }}"><img src="{{ media.medium_url }}" width="{{ media.medium_w|unlocalize }}" height="{{ media.medium_h|unlocalize }}" alt="" class="img-fluid"></a>
                            {% else %}
                                <a href="{{ tweet.get_absolute_url }}" title="See only this tweet"><img src="{{ media.small_url }}" width="{{ media.small_w|unlocalize }}" height="{{ media.small_h|unlocalize }}" alt="" class="img-fluid"></a>
                            {% endif %}

                        {% else %}

                            {# Video or Animated GIF #}

                            {% if view == 'detail' %}
                                <video width="{{ media.large_w|unlocalize }}" height="{{ media.large_h|unlocalize }}" poster="{{ media.large_url }}" controls preload="metadata" class="img-fluid">
                            {% else %}
                                <video width="{{ media.small_w|unlocalize }}" height="{{ media.small_h|unlocalize }}" poster="{{ media.large_url }}" controls preload="none">
                            {% endif %}
                                <source src="{{ media.video_url }}" type="{{ media.video_mime_type }}">
                            </video>

                        {% endif %}
                    </li>

                {% endfor %}
            </ul>

        {% endif %}
    {% endwith %}
{% endif %}
