{% load static %}
{% static "" as baseUrl %}

<link rel="stylesheet" type="text/css" href="{% static "/design/gallery.css" %}">


{% if posts %}
    {% for post in posts %}
        <div align="center" class="card">
            <img width="200" height="200" src="{{ baseUrl }}{{ post.page.page_name }}/{{ post.image_directory }}"
                 alt="Card image cap" onclick="openModal();currentSlide({{ forloop.counter }})"
                 class="hover-shadow cursor"></a>
            {% if post.date_posted %}
                <div class="container">
                    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#info{{ post.pk }}">
                        Post Info
                    </button>

                    <div id="info{{ post.pk }}" class="collapse in">
                        {% if post.likes %}
                            <p class="card-text">
                                <b>Likes : </b>{{ post.likes }}
                            </p>
                        {% endif %}

                        {% if post.caption|length > 0 %}
                            <p class="card-text">
                                <b>Caption : </b>{{ post.caption }}
                            </p>
                        {% endif %}
                        <p class="card-text">
                            <b>Date posted : </b>{{ post.date_posted }}
                        </p>
                    </div>
                </div>
            {% endif %}
        </div>
    {% endfor %}


    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            {% for post in posts %}


                <div class="mySlides">
                    <div class="numbertext">{{ forloop.counter }} / {{ posts|length }}</div>
                    <img src="{{ baseUrl }}{{ post.page.page_name }}/{{ post.image_directory }}" style="width:100%"
                         alt="{{ post.caption }}" class="demo">
                </div>
            {% endfor %}

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

            <div class="caption-container">
                <p id="caption"></p>
            </div>
        </div>
    </div>

{% else %}
    <section class="jumbotron text-center">
        <div>
            There are no posts in this section yet, try collecting data by running the crawling script
            and try again!
        </div>
    </section>
{% endif %}


<script src="{% static "/design/gallery.js" %}"></script>