{% extends 'layout.html' %}
{% block content %}
    <header>
        <img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves"/>
        <span></span>
    </header>
    <div class="app">
        <h1>Gallery</h1>
        <div id="gallery" class="gallery"></div>
    </div>
    <script>
        let imageList = [];
        let imageIndex = 0;
        
        function loadMore(startIndex, amount = 20) {
            for (let i = startIndex; i < startIndex + amount; i++) {
                if (i < imageList.length) {
                    loadImg(imageList[i][0], imageList[i][1]);
                }
            }
            imageIndex = startIndex + amount;
        }

        function loadImg(id, fileName) {
            var imgDiv = `
                <a class="gallery__item" href="/image/${id}">
                    <div class="gallery__item-info">
                        <p>${id}</p>\
                        <h2>${fileName}</h2>
                    </div>
                    <span class="gallery__item-filter"></span>
                    <img class="gallery__item-image" src="/uploads/original/${fileName}" onload="imgFade(this)" style="display:none;">
                </a>
                `;

            $(imgDiv).hide().appendTo('#gallery').fadeIn(250);
        }

        $.ajax({
            url: '/fileList/original',
            type: 'get',
            success: function(response) {
                imageList = response;
                loadMore(0, 30);
            }
        });

        $(window).scroll(function() {
            if ($(window).height() + $(window).scrollTop() >= $(document).height() - 500) {
                loadMore(imageIndex);
            }
        });
    </script>
{% endblock %}