<div class="register-page">
  <div class="form-container">

    <h1 class="mt-5 mb-4">Register</h1>

    <!--- START OF FORM --->
    <form action="/register" method="POST" class="mt-3"> <!-- Specify API route to DB -->
    <!-- app.post('register') is found in index.js -->

      <div class="mb-3" id="username-form">
        <label for="username" class="form-label">Username:</label>
        <input type="text" class="form-control" id="usernameInput" name="username" required>
      </div>

      <div class="mb-3" id="password-form">
        <label for="password" class="form-label">Password:</label>
        <input type="password" class="form-control" id="passwordInput" name="password" required>
      </div>

      <div class="dropdowns" id="dropdowns-container">

        <div>
          <label class="form-label">Preferred League :</label><br>
          <select id="league_dropdown">
            <option>Premier League</option>
            <option>La Liga</option>
            <option>Bundesliga</option>
            <option>Serie A</option>
            <option>Ligue 1</option>
            <option>Brasilerao</option>
          </select>
        </div>

        <!-- JavaScript is found at: ProjectSourceCode/src/resources/js/registration/league-and-team-select.js -->
        <div>
          <label class="form-label">Favorite Team   :</label><br>
          <select id="team_dropdown">
          </select>
        </div>

      </div>
      <button type="submit" class="btn btn-primary">Submit</button>

    </form>
    <!--- END OF FORM --->

    <p class="mt-3">Already have an account? <a href="/login">Login</a></p>

  </div>

  <script src = "js/registry-page/selectFunctions.js">  </script>
</div>

