{% extends 'components/website/layout.html' %}
{% load static %}
{% block content %} 
<div role="main" class="main" id="main">
        <section class="page-header page-header-modern bg-color-grey page-header-lg">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 align-self-center p-static order-2 text-center">
                        <h1 class="font-weight-bold text-dark text-uppercase">Gallery</h1>
                    </div>
                    <div class="col-md-12 align-self-center order-1">
                        <ul class="breadcrumb d-block text-center">
                           <li><a href="{% url 'home' %}">Home</a></li>
                        <li><a href="{% url 'photo-gallery' %}">Gallery</a></li>
                        {% if photo_gallery == 'active' %}
                        {% if photo %}
                            <li class="{{ photo_gallery }}">{{album_name.name}}</li>
                            {% endif %}
                        {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </section>
{#    <section class="section bg-color-light m-0 p-0 pt-3 border-0">#}
{#        <div class="container container-custom container-custom-initial" style="margin-top: 3%;" >#}
{#            <div class="row">#}
{#                <div class="col-md-12 col-lg-12 col-sm-12">#}
{#                    <ul class="breadcrumb d-block d-flex justify-content-start align-items-center">#}
{#                        <li><a href="/">Home</a></li>#}
{#                        <li><a href="{% url 'photo-gallery' %}">Gallery</a></li>#}
{#                        {% if photo_gallery == 'active' %}#}
{#                        {% if photo %}#}
{#                            <li class="{{ photo_gallery }}">{{album_name.name}}</li>#}
{#                            {% endif %}#}
{#                        {% endif %}#}
{#                            #}
{#                    </ul>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </section>#}
    <section class="section bg-color-light m-0 p-0 p-4 border-0">
        <div class="container container-custom" >
            <div class="row justify-content-center">
                    {% if photo %}
                    <div class="col-lg-12 mx-auto">
                    <div class="post-image">
                        <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                            <div class="row mx-0">
                                {% for data in photo_data %}
                                <div class="col-6 col-md-3 p-0">
                                    <a href="/media/photo_gallery/{{ data.image_path }}">
                                        <span class="thumb-info thumb-info-no-borders thumb-info-centered-icons">
                                            <span class="thumb-info-wrapper my-1 mx-1">
                                                <img src="/media/photo_gallery/{{ data.image_path }}" style="width: 65em !important; height:25em !important; object-fit: cover !important" class="img-fluid" alt="" />
                                                <span class="thumb-info-action">
                                                    <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-plus text-dark"></i></span>
                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                                {% endfor %}
                                
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="col-lg-12 mx-auto">
                        <ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
                        </ul>
                        <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2">
                            <div class="row portfolio-list sort-destination" data-sort-id="portfolio">
                                {% for data in album_data %}
                                <div class="col-sm-6 col-lg-3 isotope-item brands">
                                    <div class="portfolio-item">
                                        <form action="{% url 'photo-gallery' %}" method="post" autocomplete="off">
                                            {% csrf_token %}
                                            <input type="hidden" name="album_id" value="{{data.album_id}}">
                                            <button type="submit" style="border:0px" name="submit">
                                                <span class="thumb-info thumb-info-lighten border-radius-0">
                                                    <span class="thumb-info-wrapper border-radius-0">
                                                        <img src="/media/photo_gallery/{{ data.image_path }}" style="width: 50em !important; height: 10em !important;" class="img-fluid border-radius-0" alt="">
                                                        <span class="thumb-info-title">
                                                            <span class="thumb-info-inner" >{{data.album.name}}</span>
                                                        </span>
                                                    </span>
                                                </span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                {% endfor %}
                                
                            </div>
                        </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock content %}
{% block custom_js %}
<script src="{% static 'js/examples/examples.gallery.js' %}"></script>
{% endblock custom_js %}