
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title><%= pageTitle %></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="./style.css"> -->

<style>

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@import url("https://fonts.googleapis.com/css2?family=Quicksand&family=Roboto&display=swap");

body {  
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  margin-bottom: 75px; 
}

.card {
  margin: 0.5em
}

.footer {
position: fixed;
bottom: 0;
width: 100%;

}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><i class="bi bi-1-circle-fill"></i> BC KILO</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">hi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">hello </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">hey</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="row">
  
  <div class="col-sm-8 offset-sm-2">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Status?</h4>
        

        <form action="/addStatus" method="POST">
          <div class="mb-3">
            <label for="statusTime" class="form-label">'Sup?</label>
            <input type="text" class="form-control" id="statusTime" name="statusTime" rows="3"></textarea>
          </div>
          <button id="btnStatusLock" class="btn btn-primary float-start">Lock it in</button>
          <button id="btnClearList" class="btn btn-secondary float-end">Clear List</button>
        
      </form> 
        
      </div>
    </div>
  </div>
  
  <div class="col-sm-8 offset-sm-2">
    <div class="card">
      <div class="card-body">



        <h4 class="card-title">Past Statuses. <%= statusData.length %></h4>
          <ul id="statusList" class="list-group">
            
            <% for (var i=0; i < statusData.length; i++) { %>
              <li class="list-group-item"> <%= statusData[i].post %></li>

            <% } %>

            
          </ul>
        
        
      </div>
    </div>
  </div> 

 
</div>

<footer class="footer mt-auto py-3 bg-light">
  <div class="container">
    <span class="text-muted">Footer</span>
  </div>
</footer>
<!-- partial -->
  <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='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js'></script>


<script>
$(document).ready(function () {
  console.log("doc is ready");

  $("#btnStatusLock").on("click", () => {
    let statusTime = $("#statusTime").val();

    //spent too much time with rounded-top
    //  let $statusList = $('#statusList > li:first');
    // console.log($('#statusList > li:first').attr("id"));
    //  $statusList.removeClass('rounded-top');

    
    // break input into letters?
    $.each(statusTime.split(''), (index,value)=>{
    
      console.log(value); //call a function to take letter => a word?
     $("#statusList").prepend(`
        <li class="list-group-item rounded-top"> ${value}</li>`);
    });
    
//     $("#statusList").prepend(`
//         <li class="list-group-item rounded-top"> ${statusTime}e</li>
     
//     `);
    
    
    
  });
  
 $('#btnClearList').on('click', ()=>   {
 
       $("#statusList").empty();
  
   });
                          
});

</script>


</body>
</html>
