{% extends "layouts/base-electric.html" %}

{% load static %}

{% block title %} Sites {% endblock title %}

{% block stylesheets %}{% endblock stylesheets %}
    
{% block content %}
    
    {% include "includes/navigation-transparent.html" %}
    
    <div class="container-fluid" loading="lazy"> 
        <div class="e-container-border e-container-radius row mb-3" tabindex="1">
            <div class="e-container e-container-radius p-2">

                <h1 class="text-center">Twitter Overview</h1>
                
                <p class="text-center"></p>

                
                <h2>New Archived Posts:</h2>
                <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 %}
                        
                        {% if submission.content_object.files.exists %}
                            
                            {% if submission.content_object.files.all|length == 1 %}
                                <img src="{% url 'files:serve_content_file' 'submission' submission.content_object.files.first.file_hash %}" class="" alt="{{ media_files.0.name }}">

                            {% elif submission.content_object.files.all|length == 2 %}
                                {% for file in submission.content_object.files.all %}
                                    <img src="{% url 'files:serve_content_file' 'submission' file.file_hash %}" class="" alt="{{ media_file.name }}">
                                {% endfor %}
                            
                            {% else %}
                                {% for file in submission.content_object.files.all %}
                                    <div class="col">
                                        <img src="{% url 'files:serve_content_file' 'submission' file.file_hash %}" class="" alt="{{ media_file.name }}">
                                    </div>
                                {% endfor %}

                            {% 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|slice:"0:64"|add:"..." }}</p>
                            {% else %}
                                <p>{{ submission.content_object.description }}</p>
                            {% endif %}
                            <a href="{% url 'sites:artist_profile' submission.author.user_hash %}" class="z-2">{{ submission.content_object.author.artist }}</a>
                            <small class="badge bg-secondary">{{ submission.content_object.date }}</small>
                        </div>
                        
                    </div>
                    {% endfor %}
                </div>
                
            </div>
        </div>

        <div class="e-container-border row my-3" tabindex="1">
            <div class="e-container">
                
                <h2 class="text-center">New Archived Users:</h2>
                <div class="d-flex overflow-auto">
                    <div class="list-group list-group-horizontal">
                        {% for user in new_users %}
                            <div class="list-group-item bg-transparent border-0">

                                <div class="card text-bg-secondary" style="min-width: 48ch;">
                                    {% if user.banner %}
                                        <img src="{% url 'files:serve_content_file' 'user_banner' user.banner.file_hash %}" class="card-img-top" alt="{{ user.artist }}'s banner" loading="lazy">
                                    {% else %}
                                        {% comment %} <div class="placeholder" style="padding-top: 33.33333333333333%;"></div> {% endcomment %}
                                        <img src="{% static 'img/placeholder/no-banner-1500x500.png' %}" class="card-img-top" alt="{{ user.artist }} has no banner">
                                    {% endif %}
                                    <div class="row g-0 p-2">
                                        <div class="col-4">
                                            {% if user.icon %}
                                                <img src="{% url 'files:serve_content_file' 'user_profile' user.icon.file_hash %}" class="mt-3 card-img rounded-circle border border-3 border-primary" alt="{{ user.artist }}'s banner" loading="lazy">
                                            {% else %}
                                                {% comment %} <div class="placeholder" style="padding-top: 33.33333333333333%;"></div> {% endcomment %}
                                                <img src="{% static 'img/placeholder/no-icon-500x500.png' %}" class="card-img rounded-circle" alt="{{ user.artist }} has no icon">
                                            {% endif %}
                                        </div>
                                        <div class="col-8">
                                            <div class="card-body">
                                                <h5 class="card-title text-center">{{ user.artist }}</h5>
                                                <p class="card-text">{{ user.description }}</p>
                                                <p class="card-text"><small class="text-body-secondary">Added on: {{ user.date_added }}</small></p>
                                            </div>
                                        </div>
                                    </div>                                    
                                    <a href="{% url 'sites:submission' user.id %}" class="stretched-link"></a>    
                                </div>

                            </div>
                        {% endfor %}
                    </div>
                </div>

            </div>
        </div>

    </div>
    
{% endblock content %}