<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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='help'>
      <main>
        <div class='header'>
          <h2>Getting Started</h2>
        </div>
        <div class='rows'>
          <a href="https://breadboard.me" target="_blank" class='item'><b><i class="fa-solid fa-book"></i> Breadboard Manual</b>: Learn how to use breadboard</a>
        </div>
        <br><br>
        <div class='header'>
          <h2>Help</h2>
        </div>
        <div class='rows'>
          <% items.forEach((item) => { %>
            <a class="item" href="<%=item.href%>" target="_blank">
              <div><b><i class="<%=item.icon%>"></i> <%=item.name%></b>: <%=item.description%></div>
            </a>
          <% }) %>
        </div>
      </main>
    </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 init_theme = async () => {
        let theme = await db.user.settings.where({ key: "theme" }).first()
        if (!theme) theme = { val: "default" }
        document.body.className = theme.val
        document.querySelector("html").className = theme.val
        api.theme(theme.val)
      }
      const api = new API()
      const db = new DB(api);
      (async () => {
        await db.init();
        await init_theme()
      })();
    </script>
  </body>
</html>
