<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>breadboard</title>
    <link href="/css/fontawesome.min.css" rel="stylesheet">
    <link href="/css/solid.min.css" rel="stylesheet">
    <link href="/css/regular.min.css" rel="stylesheet">
    <link href="/css/brands.min.css" rel="stylesheet">
    <link href="./global.css" rel="stylesheet" />
    <% if (agent === "electron") { %>
    <link href="./electron.css" rel="stylesheet" />
    <% } %>
  </head>
  <body class="<%=theme%>" data-style="<%=style%>">
    <div id='bar'></div>
    <nav class="<%=platform%>">
      <div class='nav-unit left-menu'>
        <a title="home" class='btn' href="/" class='btn'><i class="fa-solid fa-house"></i></a>
        <button title='back' id='prev'><i class="fa-solid fa-chevron-left"></i></button>
        <button title='forward' id='next'><i class="fa-solid fa-chevron-right"></i></button>
        <a id='bookmarked-filters' title="bookmakred filters" class='btn' href="/favorites"><i class="fa-solid fa-star"></i></a>
        <a id='favorited-items' title="liked items" class='btn' href="/?query=tag:favorite"><i class="fa-solid fa-heart"></i></a>
        <div class='right-menu'>
          <div class='flexible'></div>
          <button id='show-menu'><i class="fa-solid fa-bars"></i></button>
          <button id='minimize' title='minimize to player mode'><i class="fa-solid fa-bars"></i></button>
        </div>
      </div>
      <div class='status'></div>
      <div class='search-box minimal'>
        <input type='search' placeholder='search' class='search flexible'>
      </div>
      <div class='nav-unit nav-actions'>
        <button id='live-option' title="turn live update on or off"><i class="fa-solid fa-power-off fa-spin"></i></button>
        <a id='settings-option' title="settings" class='btn' href="/settings"><i class="fa-solid fa-gear"></i></a>
        <a id='help-option' title="information and community" class='btn' href="/help"><i class="fa-solid fa-question"></i></a>
        <button title='notifications' id='notification' class= 'hidden'><i class="fa-solid fa-bell"></i></button>
        <button id='new-window' title='open a new window'><i class="fa-solid fa-plus"></i></button>
      </div>
    </nav>
    <div class='favorites'>
    </div>
    <script src="./socket.io.js"></script>
    <script src='./popper.js'></script>
    <script src='./tippy.js'></script>
    <script src="./modules/api.js"></script>
    <script src="./modules/db.js"></script>
    <script src="./dexie.js"></script>
    <script>
    const VERSION = "<%=version%>"
    const api = new API()
    const db = new DB(api);
    const init_theme = async () => {
      let theme = await db.user.settings.where({ key: "theme" }).first()
      if (!theme) theme = { val: "default" }
      document.body.className = theme.val
    }
    const search = (query) => {
      if (query && query.length > 0) {
        location.href = "/?query=" + query
      } else {
        location.href = "/"
      }
    }
    const row = (r) => {
      let checkClass = (r.global ? "fa-square-check" : "fa-square")
      let elClass = (r.global ? "global-filter on" : "global-filter")
      let globalEl = (r.global ? '<i class="fa-solid fa-power-off"></i> Turn off' : '<i class="fa-brands fa-octopus-deploy"></i> Make God')
      return `<div class='row'>
<a class='flexible' href="/?query=${encodeURIComponent(r.query)}"><i class="fa-solid fa-star"></i>&nbsp;${r.query}</a>
<div class='btn ${elClass}' data-query="${r.query}" data-global="${r.global ? 'global' : ''}">${globalEl}</div>
</div>`
    }
    const renderFavorites = async () => {
      // global
      let res = await db.user.favorites.where("global").equals(1).toArray()
      let rows = res.map(row).join("")

      // non global
      let res2 = await db.user.favorites.where("global").notEqual(1).toArray()
      let rows2 = res2.map(row).join("")

      document.querySelector(".favorites").innerHTML = `<main>
      <div class='header'>
        <h2><i class="fa-solid fa-bookmark"></i> Bookmarked Filters</h2>
        <div class='flexible'></div>
      </div>
      <div class='explain'>All your bookmarked filters</div>
      <br><br>
      <div class='rows'>
      ${rows2}
      </div>
      <br><br><br>
      <div class='header'>
        <h2><i class="fa-brands fa-octopus-deploy"></i> God filters</h2>
        <div class='flexible'></div>
      </div>
      <div class='explain'>God filters are omnipotent, invisible, and everywhere. <a href="https://breadboard.me/docs/#/?id=god-filters" target="_blank">Learn more</a></div>
      <br><br>
      <div class='rows'>
      ${rows}
      </div>
    </main>`
    }
      document.querySelector("#prev").addEventListener("click", (e) => {
        history.back()
      })
      document.querySelector("#next").addEventListener("click", (e) => {
        history.forward()
      })
    document.querySelector(".search").addEventListener("keyup", (e) => {
      if (e.key === "Enter") {
        location.href = "/?query=" + e.target.value
      }
    });
    document.querySelector(".favorites").addEventListener("click", async (e) => {
      let globalTarget = (e.target.classList.contains(".global-filter") ? e.target : e.target.closest(".global-filter"))
      if (globalTarget) {
        let query = globalTarget.getAttribute("data-query") 
        let global = (globalTarget.getAttribute("data-global") === "global")
        let newGlobal = (global ? 0 : 1)
        await db.user.favorites.where({ query }).modify({ global: newGlobal })
        location.href = location.href
      }
    });
    (async () => {
      await db.init()
      await init_theme()
      await renderFavorites()
    })();
    </script>
  </body>
</html>
