{% extends '../global.html' %}

{% load responsive_images %}

{% block content %}
{% if created_galleries|length > 0 %}
    <section class="RV-Images">
        <h2>Your galleries</h2>
        <li class="RV-Images__list">
            {% for gallery in created_galleries %}
                <a href="{% url 'gallery' pk=gallery.pk %}" class="RV-Image__link RV-Image__link--detail">
                    {% if gallery.images.all|length <= 0 %}
                        no images
                    {% endif %}
                    {% if gallery.images.all|length == 1 %}
                        {% for image in gallery.images.all %}
                            <img class="RV-Image__source" src="{% src image.image_file 200x200 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.images.all|length == 2 %}
                        {% for image in gallery.images.all %}
                            <img class="RV-Image__source" src="{% src image.image_file 100x200 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.images.all|length == 3 %}
                        {% for image in gallery.images.all %}
                            <img class="RV-Image__source" src="{% src image.image_file 100x100 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.images.all|length >= 4 %}
                        {% for image in gallery.images.all|slice:":4" %}
                            <img class="RV-Image__source" src="{% src image.image_file 100x100 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.title %}
                        <p class="RV-Image__title">{{gallery.title}}</p>
                    {% endif %}
                </a>
            {% endfor %}
        </li>
    </section>
{% endif %}
{% if invited_galleries|length > 0 %}
    <section class="RV-Images">
        <h2>Galleries you were invited to</h2>
        <li class="RV-Images__list">
            {% for gallery in invited_galleries %}
                <a href="{% url 'gallery' pk=gallery.pk %}" class="RV-Image__link RV-Image__link--detail">
                    {% if gallery.images.all|length <= 0 %}
                        no images
                    {% endif %}
                    {% if gallery.images.all|length == 1 %}
                        {% for image in gallery.images.all %}
                            <img class="RV-Image__source" src="{% src image.image_file 200x200 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.images.all|length == 2 %}
                        {% for image in gallery.images.all %}
                            <img class="RV-Image__source" src="{% src image.image_file 100x200 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.images.all|length == 3 %}
                        {% for image in gallery.images.all %}
                            <img class="RV-Image__source" src="{% src image.image_file 100x100 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.images.all|length >= 4 %}
                        {% for image in gallery.images.all|slice:":4" %}
                            <img class="RV-Image__source" src="{% src image.image_file 100x100 %}">    
                        {% endfor %}
                    {% endif %}
                    {% if gallery.title %}
                        <p class="RV-Image__title">{{gallery.title}}</p>
                    {% endif %}
                </a>
            {% endfor %}
        </li>
    </section>
{% endif %}
{% endblock content %}