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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All Lists</title>
  <link rel="stylesheet" href="/list-mvc/style.css">
</head>

<body>
  <div class="container">
    <h1>All Lists</h1>
    <ul class="list-group">
      <% lists.forEach(list=> { %>
        <li class="list-item">
          <a href="/list-mvc/list/<%= list.id %>">
            <%= list.title %>
          </a>
          <a class="remove-btn" href="/list-mvc/remove-list/<%= list.id %>">remove list</a>
        </li>
        <% }); %>
    </ul>
    <form action="/list-mvc/add-list" method="POST">
      <input type="text" name="title" placeholder="New list title">
      <button type="submit" class="btn">Create New List</button>
      <button id="themeToggle" class="btn">Dark/Light</button>
    </form>
  </div>
</body>

<script>
  document.querySelector("input").focus();

  const themeToggle = document.getElementById('themeToggle');
  const currentTheme = localStorage.getItem('theme') || 'light';

  document.documentElement.setAttribute('data-theme', currentTheme);

  themeToggle.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';

    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  });
</script>

</html>
