<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Oilgen Limited - Our Gallery</title>

    {% include 'includes/import-top.html' %}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery-bundle.min.css" integrity="sha512-nUqPe0+ak577sKSMThGcKJauRI7ENhKC2FQAOOmdyCYSrUh0GnwLsZNYqwilpMmplN+3nO3zso8CWUgu33BDag==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js" integrity="sha512-jEJ0OA9fwz5wUn6rVfGhAXiiCSGrjYCwtQRUwI/wRGEuWRZxrnxoeDoNc+Pnhx8qwKVHs2BRQrVR9RE6T4UHBg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->

    <style>
        .grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
            grid-gap: 2px !important;
            grid-auto-rows: min-max(80px, auto) !important;
            grid-auto-flow: dense !important;
        }

        .c-1 {
            background: #1a535c !important;
            color: #ddd !important;
        }

        .c-2 {
            background: #4ecdc4 !important;
        }

        .c-3 {
            background: #bfd7ea !important;
        }

        .c-4 {
            background: #ff6b6b !important;
        }

        .c-5 {
            background: #ffe66d !important;
        }

        .card {
            min-height: 100px !important;
            background-size: cover !important;
            background-position: 50% 50% !important;
        }

        .span-2 {
            grid-column-end: span 2 !important;
            grid-row-end: span 2 !important;
            min-height: 200px !important;
        }

        .span-3 {
            grid-column-end: span 3 !important;
            grid-row-end: span 3 !important;
            min-height: 400px !important;
        }
    </style>
</head>

<body>

    {% include 'includes/header.html' %}

    <div class="breadcroumb-area bread-bg"
        style="background-image: url({{url_for('static', filename='assets/img/bread-bg.jpg')}});">
        <div class="container pt-5">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcroumb-title">
                        <h1>Our Gallery</h1>
                        <h6><a href="{{url_for('index')}}">Home</a> <i class="far fa-dot-circle"></i> Our Gallery</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="contact-us" class="contact-us-area section-padding">
        <div class="container">
            <div class="">
                <div class="grid" id="static-thumbnails">
                    {% for image in images %}
                    <a href="{{url_for('static', filename=image)}}" class="glightbox card span-2 c-5"
                        style="background-image: url({{url_for('static', filename=image)}}) !important"></a>
                    {% endfor %}
                </div>

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


    {% include 'includes/footer.html' %}

    {% include 'includes/import-bottom.html' %}
    <script type="text/javascript">
        const lightbox = GLightbox({
            touchNavigation: true,
            loop: true,
            autoplayVideos: true
        });
        /*lightGallery(document.getElementById('static-thumbnails'), {
            animateThumb: false,
            zoomFromOrigin: false,
            allowMediaOverlap: true,
            toggleThumb: true,
        });*/
    </script>
</body>

</html>