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

<head>
    <title>NyaZoom</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/main.css" rel="stylesheet">
    <script>
        fetch("https://catfact.ninja/fact")
            .then(data => data.json())
            .then(data => {
                document.getElementById("cat-fact").innerHTML = data.fact;
            });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            let inputs = document.querySelectorAll('input#file');
            Array.prototype.forEach.call(inputs, function (input) {
                let label = input.nextElementSibling;
                let labelVal = label.innerHTML;
                input.addEventListener('change', function (e) {
                    let fileName = '';

                    if (this.files?.length > 1) {
                        fileName = this.getAttribute('data-multiple-caption')?.replace('{count}', this.files.length);
                    } else {
                        fileName = e.target.value.split('\\').pop();
                    }

                    label.innerHTML = fileName || labelVal;
                });
            });
        }, false);
    </script>
</head>

<body>
    <h1>NyaZoom<sup>2</sup></h1>
    <div class="form-wrapper">
        <form action="/upload" method="post" enctype="multipart/form-data" class="main-form">
            <div class="cat-img-wrapper">
                <img class="cat-img" src="https://cataas.com/cat?width=250&height=250" />
            </div>
            <input type="file" id="file" name="file" data-multiple-caption="{count} files selected" multiple />
            <label for="file">Select Files</label>

            <input type="submit" value="Get Link~">
            <p id="cat-fact" />
        </form>
    </div>
</body>

</html>