<!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.0">
    <title>SKINFT</title>
    <link rel='stylesheet' type='text/css' href='/public.css'>
    <link rel='stylesheet' type='text/css' href='/index.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var i = 0;

        async function getItems(change) {
            i += change;
            if (i < 0) {
                i = 0;
                return;
            }

            let container = $('.container');
            let form = new FormData();
            form.append('page', i);
            form.append('itemsOnPage', 3);
            form.append('name', $('#searchphrase').val());
            form.append('available', $('#available').is(':checked'));

            let result = await fetch('/items', {
                method: 'POST',
                body: form
            });
            result = await result.text();
            let o = JSON.parse(result);
            if (i !== 0 && !o.length) {  // assuming that `o` is an array
                i--;
                return;
            }

            $('.pgcnt').each(function() {this.textContent = i + 1});
            container.html('');
            for (let item of o) {
                container.append($('<a>', {
                    class: 'item',
                    href: '/item/' + item.name,
                    title: 'item in shop: ' + item.name
                }).append($('<p>', {
                    text: item.name
                })).append($('<img>', {
                    class: 'page-item',
                    src: 'data:image/png;base64,' + item.thumbnail
                })).append($('<p>', {
                    class: 'price-tag',
                    text: 'USD: ' + item.priceUsd + '$'
                })));
            }
        }

        function invokeMeOnLoad() {
            $('.next').each(function() {
                this.addEventListener('click', () => { getItems(1) });
            });
            $('.prev').each(function() {
                this.addEventListener('click', () => { getItems(-1) });
            });
            getItems(0);
        }

        $(invokeMeOnLoad);
    </script>
</head>

<body>
    <%- include('header', { user: locals.user }) %>
    <div class='big-container'>
        <aside>
            <h1>Filters</h1>
            <label for="searchphrase">Skin name:</label>
            <input type="text" id="searchphrase"><br>
            <label for="available">Show only available:</label>
            <input type="checkbox" id="available"><br>
            <button id="submit" onclick="i = 0; getItems(0)">Search</button>
        </aside>
        <main>
            <div class='buttons'>
                <button class='prev'>&larr;</button>
                <span class="pgcnt"></span>
                <button class='next'>&rarr;</button>
            </div>
            <div class='container'>
            </div>
            <div class='buttons'>
                <button class='prev'>&larr;</button>
                <span class="pgcnt"></span>
                <button class='next'>&rarr;</button>
            </div>
        </main>
    </div>
    <%- include('footer', { user: locals.user }) %>
    <% if (locals.message) { %>
        <script>alert("<%= locals.message %>")</script>
    <% } %>
</body>

</html>