{% load static %}

{% load media_filters %}

{% load string_helper %}

{% load thumbnail %}

<div class="gallery-container">
    {% for submission in submissions %}
    <div class="gallery-item bg-dark">
        
        {% include "sites/partials/site-btn-overlay.html" with category=submission.category.name %}

        <span class="seen-overlay text-primary-emphasis" data-seen="false" data-hash="{{ submission.submission_hash }}" href=''></span>

        {% if submission.content_object.files.exists %}
            
            {% if submission.content_object.files.first.file_mime|is_image %}

                {% if submission.content_object.files.all|length == 1 %}
                    {% thumbnail submission.content_object.files.first.file "350" as im %}
                        {% if submission.mature == True and user_profile.show_mature == "B" %}
                            <img src="{{ im.url }}" alt="{{ submission.content_object.files.first.file_name }}" height="100%" class="blur">    
                        {% else %}
                            <img src="{{ im.url }}" alt="{{ submission.content_object.files.first.file_name }}" height="100%">
                        {% endif %}
                    {% endthumbnail %}

                {% elif submission.content_object.files.all|length == 2 %}
                    {% for file in submission.content_object.files.all %}
                        {% thumbnail file.file "350" as im %}
                            {% if submission.mature == True and user_profile.show_mature == "B" %}
                                <img src="{{ im.url }}" alt="{{ file.file_name }}" height="100%" class="blur">    
                            {% else %}
                                <img src="{{ im.url }}" alt="{{ file.file_name }}" height="100%">
                            {% endif %}
                        {% endthumbnail %}
                    {% endfor %}

                {% else %}
                    {% for file in submission.content_object.files.all %}
                        {% thumbnail file.file "350" as im %}
                            <div class="col">
                                {% if submission.mature == True and user_profile.show_mature == "B" %}
                                    <img src="{{ im.url }}" alt="{{ file.file_name }}" height="100%" class="blur">    
                                {% else %}
                                    <img src="{{ im.url }}" alt="{{ file.file_name }}" height="100%">
                                {% endif %}
                            </div>
                        {% endthumbnail %}
                    {% endfor %}

                {% endif %}

            {% elif submission.content_object.files.first.file_mime|is_video %}

                <video class="gallery-item" src="{% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}" controlsList="nodownload"></video>
            
            {% else %}
                <img src="{% static 'img/placeholder/no-image-dark.webp' %}">
            
            {% endif %}

        {% else %}
        
            <span class="badge bg-secondary">This submission has no media</span>
        
        {% endif %}
        <a href='{% url "sites:submission" submission.submission_hash %}' class="stretched-link"></a>
        <div class="overlay p-2 text-center">
            {% if submission.content_object.description|length > 64 %}
                <p>{{ submission.content_object.description|html_to_text|slice:"0:64"|add:"..." }}</p>
            {% else %}
                <p>{{ submission.content_object.description|html_to_text }}</p>
            {% endif %}
            <a href="{% url 'sites:artist_profile' submission.author.user_hash %}" class="z-2">
                {% if submission.category.name == "furaffinity" %}
                {{ submission.content_object.artist.artist }}
                {% else %}
                {{ submission.content_object.author.artist }}
                {% endif %}
            </a>
            <small class="badge bg-secondary">{{ submission.content_object.date|date:'Y-m-d H:i:s' }}</small>
        </div>
    </div>
    {% endfor %}
</div>