<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Overcooked Demo</title>
    <link rel="Favicon" href="static/favicon.ico" />

    <script src="static/lib/jquery-min.js" type="text/javascript"> </script>
    <script src="static/lib/d3.v3.min.js" type="text/javascript"> </script>
    <script src="static/lib/babel.min.js" type="text/javascript"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/5.8.0/socket.io.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>
    
    <script src="//cdn.jsdelivr.net/npm/phaser@3.23.0/dist/phaser.min.js"></script>

    <script src="static/js/graphics.js", type="text/javascript"></script>
    <!-- <script src="static/js/dummy_graphics.js", type="text/javascript"></script> -->
    <script src="static/js/index.js" type="text/javascript"></script>

    <link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="static/css/style.css" type="text/css" />
  </head>
  <body>
    <form>
      <div class="container">
      <div class="row text-center">
	<div class="form-group col-lg-3">
	  <label for="playerZero" style="color:#1E6A9E">Player 1</label>
	  <select class="form-control" id="playerZero" name="playerZero">
        <option value="human">Human Keyboard Input</option>
        {% for agent_name in agent_names %}
            <option value={{agent_name}}>{{agent_name}}</option>
        {% endfor %}
	  </select>
    </div>
  <div class="form-group col-lg-3">
    <label for="playerOne" style="color:#44956B">Player 2</label>
    <select class="form-control" id="playerOne" name="playerOne">
        <option value="human">Human Keyboard Input</option>
        {% for agent_name in agent_names %}
            <option value={{agent_name}}>{{agent_name}}</option>
        {% endfor %}
    </select>
  </div>
	<div class="form-group col-lg-2">
	  <label for="layout">Layout</label>
	  <select class="form-control" id="layout" name="layout">
        {% for layout in layouts %}
            <option value={{layout}}>{{layout}}</option>
        {% endfor %}
	  </select>
	</div>
  <div class="form-group col-lg-2">
    <label for="gameTime">Game Length (sec)</label>
    <input type="number" id="gameTime" value="30" min="1" max="1800" name="gameTime">
  </div>
  <div class="form-group col-lg-2">
    <label for="showPotential">Show Potential?</label>
    <input type="checkbox" id="showPotential" name="showPotential">
    <label for="Use Old Dynamics" data-toggle="tooltip" data-placement="top" title="If checked, the soup will start cooking automatically when all ingredients are put in the pot instead of requiring an extra interaction. This was the design in the Neurips2019 paper.">Old dynamics?</label>
    <input type="checkbox" id="oldDynamics" name="oldDynamics">
    <label for="dataCollection" data-toggle="tooltip" data-placement="top" title="Whether to store the trajectories of both agents that will participate in this game">Collect Data?</label>
    <input type="checkbox" id="dataCollection" name="dataCollection" checked>
  </div>
      </div>
      </div>
    </form>
    <h4 id="instructions" class="text-center"><a href="./instructions">Instructions</a></h4>
    <h4 id="tutorial" class="text-center"><a href="./tutorial">Tutorial</a></h4>
    <div id="lobby", class="text-center" style="display:none">
        <h4 class="text-center">Game Lobby</h4>
        Waiting for game to start...
    </div>
    <div id="waiting", class="text-center" style="display:none">
      Waiting for game to be created. Please be patient...
    </div>
    <div id="overcooked-container" class="text-center">
        <h4 id="game-title" style="display:none">Game in Progress</h4>
        <h4 id="game-over" style="display:none">Game Over</h4>
        <div id="overcooked"></div>
        <div id="error-exit" style="display:none">Game ended unexpectedly (probably due to another user disconnecting)</div>
    </div>
    <div id="control" class="text-center">
        <button id="create">Create Game</button>
        <button id="join">Join Existing Game</button>
        <button id="leave" style="display:none;">Leave</button>
    </div>
    

    <noscript>
      <h1>Warning: Javascript seems to be disabled</h1>
      <p>This website requires that Javascript be enabled on your browser.</p>
      <p>Instructions for enabling Javascript in your browser can be found 
	<a href="http://support.google.com/bin/answer.py?hl=en&answer=23852">here</a></p>
    </noscript>
  </body>
</html>
