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

<head>
  <%- include('../partials/head'); %>
</head>

<body class="body-series">
  <header class="header-series">
    <ul>
      <% if (user) { %>
        <li>Welcome, <%= user.email %>
        </li>
        <li><a class="logout" href="/logout">Log out</a></li>
      <% } else { %>
        <li><a href="/login">Log in</a></li>
        <li><a href="/signup" class="btn">Sign up</a></li>
      <% } %>
    </ul>
  </header>
  <h1>Choose Series</h1>

  <a class="add-serie" href="series/create">Add Series</a>

  <main class="main-series">
    <% series.forEach(serie=> { %>
    <article class="card">
      <a href="/series/<%= serie._id %>">
        <img loading="lazy" src="<%= serie.img %>" alt="<%= serie.title %>" />
        <% if(user.likes.includes(serie._id)) { %>
        <form action="/dislike/<%= user._id %>" method="post">
          <button type="submit">
            <span class="heart-default heart-added"></span>
          </button>
          <input type="hidden" name="serieId" value="<%= serie._id %>" />
        </form>
        <% } else { %>
        <form action="/like/<%= user._id %>" method="post">
          <button type="submit">
            <span class="heart-default "></span>
          </button>
          <input type="hidden" name="serieId" value="<%= serie._id %>" />
        </form>
        <% } %>

        <h3>
          <%= serie.title %>
        </h3>
      </a>
    </article>
    <% }) %>
  </main>
  <script src="../dist/js/visibility.js"></script>
  <script src="../dist/js/series.js"></script>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    // Establish a connection to the Socket.io server
    const socket = io();

    // Listen for the logout event from the server
    socket.on('logout', () => {
 
      location.reload(); 
    });
  </script>
</body>

</html>
