<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body class="container">

<header>
    <% include ../partials/header %>
</header>

<main>
<div class="row">
    <div class="col-sm-8">
        <div class="jumbotron">
            <h1>EnlivenMinetest</h1>
            <p>Choose Skin.</p>
            <h2>&nbsp;<!--result--></h2>
            <p><%= msg %></p>
        </div>
        <div>
        <form action="/select-skin" method="post" enctype="multipart/form-data">
            <div>User Name (case-sensitive): <input type="text" name="userName" id="userName"></div>
            <!--<div><input type="hidden" name="skinFileName" id="skinFileName"></div>-->
            <!--<div><input type="submit" value="Select" name="submit"></div>-->
        </form>
        </div>
        <div id="setSkinResult"></div>
        <script type="text/javascript">
            function setSkin(skinFileName) {
                if ((skinFileName != undefined) && (skinFileName.length>0)) {
                    var userName = document.getElementById("userName").value;
                    if (userName.length>0) {
                        document.getElementById("setSkinResult").innerHTML="You chose " + skinFileName + "...";
                        location.href = "/select-skin?userName="+userName+"&skinFileName="+skinFileName;
                    }
                    else {
                        alert("You must enter your username in the box first.");
                    }
                }
                else {
                    alert("No skin was specified.");
                }
            };
        </script>
        <div style="width: 100%; overflow: hidden;">
            <% skinFileNames.forEach(function(skinFileName) { %>
                <div style="width:128pt; border-style:solid; border-width:0pt; border-bottom-width:2pt; border-color:lightgray; margin-bottom:10pt">
                <a id="<%= skinFileName %>" href="javascript:setSkin('<%= skinFileName %>')"><img style="width:128pt;height:auto" alt="<%= skinFileName %>" src="public/skins/<%= skinFileName %>"/><br/><%= skinFileName %></a>
                <br/>&nbsp;</div>
            <% }); %>
            </script>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="well">
            <h3>Links:</h3>
            <p><a href="https://poikilos.dyndns.org">Center of the Sun</a></p>
        </div>
    </div>

</div>
</main>

<footer>
    <p>authors and licenses for skins from Bucket Game can be found at: <a href="https://minetest.org/bucketgame.html">Bucket_Game</a></p>
    <p>For any additional skins, information may be at <a ref="https://github.com/poikilos/EnlivenMinetest/blob/master/README.md">ENLIVEN</a></p>
    website: <% include ../partials/footer %>
</footer>

</body>
</html>