<%- include('partials/header'); -%>


<% console.log(player); %>

<ul class="recipes">
  <% player.forEach(function(e) {  %>
    <li class="recipe">
      <img src="/img/smoothie.png" alt="smoothie recipe icon">
      <h4><%= e.username %></h4>
      <p>Score: <%= e.score %></p>
      <% if (user.admin) {%>
        <button class="delete" id="<%= e._id %>"><a href="">Delte score</a></button>
        <% } %>
    </li>
  <% }); %>
  <% if (user.admin) { %>
  <script>
    const btnDelete = document.querySelectorAll('.delete')   
      for (let i = 0; i < btnDelete.length; i++) {
     btnDelete[i].addEventListener("click", function() {
       btnDelete[i].style.color="blue";
       plsWRKFFS(btnDelete[i].id)
      
      })}
    
      async function plsWRKFFS(e) {
        try  {
            const res = await fetch('/deleteScore', { 
            method: 'POST', 
            body: JSON.stringify({  id: e }),
            headers: {'Content-Type': 'application/json'}
                });
            const data = await res.json()
            if (data.errors) {
                console.log(data.errors);
            }


        } catch (error) {
            console.log(error);
        }
     }


  </script>
  <% } %>
</ul>

<%- include('partials/footer'); -%>