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

<head>
  <!-- Required meta tags -->
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <link href="signin.css" rel="stylesheet">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="null">

  <title>Select your account type - High School JobFinder</title>
</head>

<body>

  <div class="text-center">

    <h1 class="h1 mb-3 font-weight-bold"> Please choose your account type </h1>

    <h2 class="h3 mb-3 font-weight-normal"> Your school's administrator will be required to approve your account </h2>
    
     <!-- user selects their account type -->   
    <form action="/preregister" method="POST">

      <div class="btn-group btn-group-toggle" data-toggle="buttons">

        <label class="btn btn-secondary active btn-lg">
          <input type="radio" name="accounttype" id="student" value="student" autocomplete="off" selected> Student
        </label>

        <label class="btn btn-secondary btn-lg">
          <input type="radio" name="accounttype" id="employer" value="employer" autocomplete="off"> Employer
        </label>

        <label class="btn btn-secondary btn-lg">
          <input type="radio" name="accounttype" id="admin" value="admin" autocomplete="off"> Admin
        </label>

      </div>

      <br><br>
    
      <button class="btn btn-lg btn-primary" id="submit" type="submit">Next</button>
    </form>
    
    <a class="btn btn-lg btn-link btn-block botButton" href="/login">Already have an account?</a>

  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</body>


</html>