<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <!-- Bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <h2>Registration Form</h2>
  <form method="post" action="api.php">
      <input type="hidden" name="TYPE" value="register"/>
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Enter First Name">
    </div>
    <div class="form-group">
      <label for="middleName">Middle Name</label>
      <input type="text" class="form-control" id="middleName" name="middleName" placeholder="Enter Middle Name">
    </div>
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Enter Last Name">
    </div>
    <div class="form-group">
      <label for="mobileNumber">Mobile Number</label>
      <input type="tel" class="form-control" id="mobileNumber" name="mobileNumber" placeholder="Enter Mobile Number">
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email">
    </div>
    <div class="form-group">
      <label for="country">Country</label>
      <input type="text" class="form-control" id="country" name="country" placeholder="Enter Country">
    </div>
    <div class="form-group">
      <label for="cityMunicipality">City/Municipality</label>
      <input type="text" class="form-control" id="cityMunicipality" name="cityMunicipality" placeholder="Enter City/Municipality">
    </div>
    <div class="form-group">
      <label for="region">Region</label>
      <input type="text" class="form-control" id="region" name="region" placeholder="Enter Region">
    </div>
    <div class="form-group">
      <label for="club">Club</label>
      <input type="text" class="form-control" id="club" name="club" placeholder="Enter Club">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
