{% extends 'default.html' %}

{% block content %}
    <div class="text-center pb-5">
        <h3 class="display-3">{{ flashday.title }}</h3>
        <h5><b>{{ flashday.subtitle }}</b></h5>
    </div>

    <div class="container text-justify">
        <div class="row justify-content-center align-items-center pb-5">

            <div class="col-md-4">
                <div class="">
                    <img class="img-raised rounded img-fluid" src="{{ flashday.image.url }}" alt="">
                </div>
            </div>

            <div class="col-md-6">
                <div class="mt-3">
                    {{ flashday.description | safe }}
                </div>
            </div>

        </div>
    </div>

    <hr>

    {% for collection in collections %}
        <div class="row justify-content-center align-items-center pt-5 pb-5 ">

            <div class="col-lg-4">
                <a href="https://instagram.com/{{ collection.artist.instagram }}">
                    <div style="max-height:465px; overflow:hidden">
                        <img class="img-raised rounded img-fluid"
                             src="{{ collection.artist.picture.url }}"
                             alt="{{ collection.artist.name }}">
                    </div>
                </a>
            </div>

            <div class="col-lg-4">
                <a href="https://instagram.com/{{ collection.artist.instagram }}">
                    <h3 class="title">{{ collection.artist.name }} <i class="icon fab fa-instagram"></i></h3>
                </a>

                <p>{{ collection.artist.description }}</p>

                <a class="btn btn-primary" data-toggle="collapse" href="#{{ collection.artist.instagram }}"
                   role="button" aria-expanded="false" aria-controls="{{ collection.artist.instagram }}">
                    Conferir Amuletos
                </a>
            </div>

            <div class="col-12">
                <div class="collapse multi-collapse" id="{{ collection.artist.instagram }}">
                    <div class="card card-body">
                        <div class="row justify-content-around">

                            {% for product in collection.product_set.all %}
                                <div class="col-md-6 align-self-center">
                                    <div class="text-center pb-3">
                                        <a class="row align-items-center" href="{% url 'product' product.id %}">

                                            <div class="col-lg-6 flex-column">
                                                <div class="justify-content-center align-items-center" style="overflow:hidden;">
                                                    <img class="img-raised rounded img-fluid" src="{{ product.picture.url }}">
                                                </div>
                                            </div>

                                            <div class="col-lg-6 flex-column">
                                                <div class="mt-3">
                                                    <h5 class="title">{{ product.title }}</h5>
                                                    <p>{{ product.description }}</p>
                                                    <button class="mt-3 btn {% if product.availability %} bg-primary {% else %} bg-dark {% endif %}">
                                                        {% if product.availability %} Disponível {% else %} Vendido {% endif %}
                                                    </button>
                                                </div>
                                            </div>

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

                        </div>
                    </div>
                </div>
            </div>

        </div>
    {% endfor %}

    {% include 'flashday/informativo-antiplagio.html' %}

{% endblock %}