<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Morra</title>
        <link rel="stylesheet" href="styling.css">
    </head>
    <body>
        <div class="main-page-layout" style="z-index:-1">
            <h1 style="padding-top:10px">Morra</h1>
            <h3 style="top:-40%">Instructions: </h3>
            <h4 style="font-weight:normal">Guess what the sum of total fingers are!</h4>
            <h4 style="font-weight:normal">Select how many fingers you are holding up, and guess how many are held up between you and your opponent.</h4>
            <h4 style="font-weight:normal">If you guess right, you win that many points!</h4>
            <div>
                <form method="post" action="/morraWin">
                    Guess: <input type="text" id="guess" name="guess" value=""><br>
                    <label for="fingers">Fingers:</label>
                    <select id="fingers" name="fingers">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                    <input type="submit" id = "1111" value=" Play! " style="z-index:1;">
                </form>
            </div>

            <h1 id = "4">Your Hand: <%= input%></h1> 
            <h1 id = "5">Opponent: <%= outcome%></h1>
            <h1 id = "6">Sum: <%= sum%></h1>
            <h4 style="font-weight:normal"><%= res%></h4>
        </div>
        <div>
            <form method="post" action="/gameMenu" style="text-align:center;margin:auto;width:50%;z-index:1;">
                <input type="submit" value="Return to Game Menu">
            </form>
            <form method="post" action="/databaseDisplay" style="text-align:center;margin:auto;width:50%;z-index:1;">
                <input type="submit" value="View Scoreboard">
            </form>
        </div>
        <script type="module" src="../server.js"></script>
    </body>
</html>