<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="/styles/styles.css">
<!-- <link rel="stylesheet" href="/styles/styles.css"> -->

<nav class="navbar">
  <form class="form-inline" method="GET" action="/indexPage">
    <input type="submit" value="back to start page" />
  </form>
  <form class="form-inline" method="GET" action="/storyPage">
    <input type="submit" value="back to the story" />
  </form>
</nav>

</head>

<body class="container">


    <!-- <form method="GET" action="/indexPage">
        <input type="submit" value="go back home" />
      </form>
      <br>
      <form method="GET" action="/storyPage">
        <input type="submit" value="back to the story" />
      </form> -->

      <br>
      <!-- <div class="row">
        <p>Send your secrets via text! Please type in your number below!</p>
        <form method="POST" action="/gmail">
          <input name="pwd" type="password">
          <button type="submit">submit</button>
      </form>
      </div> -->


      <div id="explain" class="row">
        <div class="col-md-8 offset-md-2">
        <p>Send your secrets via text! Please type in your number and then write any secrets you found that you'd like to keep!</p>
      <form method="post" action="/gmail">
        <input name="phoneNumber" type="text" placeholder="phone number">
        <input name="message" type="textarea" placeholder="message">
       <br><br>
        <p>Please select which carrier you use below</p>
        <input type="radio" id="att" name="carrier" value="att" checked>
    <label for="att">AT&T</label><br>
    <input type="radio" id="verizon" name="carrier" value="verizon">
    <label for="verizon">Verizon</label><br><br>
        <button type="submit">submit</button>
    </form>
  </div>
</div>

<div class="row">
    <% for (var i=0; i< nameData.length; i++ ) { %>
    <div class="col-md-6">
      <div class="card mt-2">
        <div class="card-body">
          <h4 class="card-title">Player: <%= nameData[i].name %></h4>
          <p class="card-text" hidden>Player ID: <%= nameData[i]._id %></p>        
          <p class="card-text">Secrets: <%= nameData[i].secrets %></p>        
          <form method="POST" action="/updateSecret/" style="display: inline-block">
            <input type="hidden" name="id" value="<%= nameData[i]._id %>">
            <input id="userInput" name="newSecret" placeholder="secret obtained">
            <button id="button" class="btn btn-primary">update secret </button>
          </form>
          
          
          <form method="POST" action="/deleteName/<%= nameData[i]._id %>" style="display: inline-block">
            <button id="button" class="btn btn-primary">delete User</button>
          </form>
          
       </div>
      </div>
    </div>
    <% } %>
  
  
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js'></script><script  src="./scripts/script.js"></script>


</body></html>