{% extends 'layout.html' %}

{% block nav_home %}navigation-item__selected{% endblock %}

{% block content %}
    <div class="banner">
        <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
        <span></span>

        <div class="banner-content">
            <p>{{ motto }}</p>
            <h1>{{ name }}</h1>
            <p>Serving {{ image_count }} images</p>
        </div>
    </div>

    <div class="gallery-grid">
        {% for image in images %}
            <a id="image-{{ image['id'] }}" class="gallery-item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
                <span>
                    <p></p>
                    <h2><span class="time">{{ image['created_at'] }}</span></h2>
                </span>
                <img
                    data-src="{{ image['file_name'] }}"
                    onload="imgFade(this)"
                    style="opacity:0;"
                />
            </a>
        {% endfor %}
    </div>
{% endblock %}

{% block script %}
    <script>
        function loadOnView() {
            var images = document.querySelectorAll('.gallery-item img');

            for (var i = 0; i < images.length; i++) {
                var image = images[i];
                if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
                    if (!image.src) {
                        image.src = `/api/uploads/${image.getAttribute('data-src')}?w=500&h=500`
                    }
                }
            }
        }
        window.onload = function() {
            loadOnView();
        };
        window.onscroll = function() {
            loadOnView();
        };
        window.onresize = function() {
            loadOnView();
        };

        if (document.referrer.includes('image')) {
            try {
                var referrerId = document.referrer.split('/').pop();
    
                var imgOffset = document.getElementById('image-' + referrerId).offsetTop;
                var imgHeight = document.getElementById('image-' + referrerId).offsetHeight;
                var windowHeight = window.innerHeight;
    
                document.querySelector('html').style.scrollBehavior = 'auto';
                window.scrollTo(0, imgOffset + (imgHeight / 2) - (windowHeight / 2));
                document.querySelector('html').style.scrollBehavior = 'smooth';
            } catch (e) {
                console.log(e);
            }
        }
    </script>
{% endblock %}