<!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="./clusterize.css" rel="stylesheet" />
    <link href="./tagger.css" rel="stylesheet" />
    <link href="./select.css" rel="stylesheet" />
    <link href="./viewer.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>
        <button title='synchronize files' id="sync"><i class="fa-solid fa-rotate"></i></button>
        <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'>
        <div title="total number of items" class='content-info'></div>
        <input type='search' placeholder='search' class='search flexible'>
        <button title='bookmark this page' id='favorite'><i class="fa-regular fa-star"></i></button>
        <div class='sorter-button'>
          <i class="nomargin fa-solid fa-arrow-down-wide-short"></i>
          <select title='sort results' id='sorter'>
            <option value='0'>created (↓)</option>
            <option value='1'>created (↑)</option>
            <option value='2'>updated (↓)</option>
            <option value='3'>updated (↑)</option>
            <option value='4'>prompt (a-z)</option>
            <option value='5'>prompt (z-a)</option>
            <option value='6'>width (↓)</option>
            <option value='7'>width (↑)</option>
            <option value='8'>height (↓)</option>
            <option value='9'>height (↑)</option>
            <option value='10'>aesthetic (↓)</option>
            <option value='11'>aesthetic (↑)</option>
          </select>
        </div>
      </div>
      <div class='nav-unit nav-actions'>
        <button id='view-option' title="customize card display"><i class="fa-solid fa-film"></i></button>
        <button id='live-option' title="turn live update on or off"><i class="fa-solid fa-power-off fa-spin"></i></button>
        <% if (agent === "electron") { %>
          <button id='pin' title='pin the window always on top'><i class="fa-solid fa-thumbtack"></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='loading hidden'>
      <i class="fa-solid fa-circle-notch fa-bounce"></i>
      <br><br>
      <span>loading</span>
    </div>
    <div class='empty-container'></div>
    <div class='container'>
      <div class='content'></div>
      <div class='end-marker'>
        <div class='caption'>
          <i class="fa-solid fa-chess-board fa-bounce"></i>
        </div>
      </div>
    </div>
    <div class='settings'></div>
    <div class='favorites'></div>
    <div class='help'></div>
    <footer class='hidden'>
      <button class='selected-count'>
        <i class="fa-regular fa-hand-pointer"></i> <span class='counter'></span> SELECTED
      </button>
      <div class='tag-menu'>
        <div class='tag-menu-items hidden'>
          <div>
            <input type='text' name='remove-tags' id='remove-tag-field' placeholder='remove tags from the selection'/>
            <button id='remove-tags'><i class="fa-regular fa-trash-can"></i> REMOVE TAGS</button>
          </div>
          <div>
            <input type='text' name='add-tags' id='add-tag-field' placeholder='add tags to the selection'/>
            <button id='save-tags'><i class="fa-solid fa-plus"></i> ADD TAG</button>
          </div>
        </div>
        <button id='tag-menu'>
          <span class='tag-menu-collapsed'>
            <i class="fa-solid fa-tag"></i> EDIT TAGS
          </span>
          <span class='tag-menu-expanded hidden'>
            <i class="fa-solid fa-angle-down"></i>
          </div>
        </button>
      </div>
      <button id='delete-selected'><i class="fa-regular fa-trash-can"></i> DELETE FILES</button>
      <button id='refresh-selected'><i class="fa-solid fa-rotate-right"></i> RE-INDEX</button>
      <div class='flexible'></div>
      <button id='cancel-selection'><i class="fa-solid fa-x"></i></button>
    </footer>
    <% if (query) { %>
    <div id='query' class='hidden' data-value="<%=query.query%>"></div>
    <% } %>
    <script>
      const VERSION = "<%=version%>"
      const SORTER = <%=current_sorter_code%>
      <% if (need_update) { %>
        var NEED_UPDATE = <%-JSON.stringify(need_update)%>
      <% } else { %>
        var NEED_UPDATE = null
      <% } %>
      var SYNC_MODE = "<%=sync_mode%>"
      var SYNC_FOLDER = "<%=sync_folder%>"
      var AGENT = "<%=agent%>"
      document.querySelector("select option[value='<%=current_sorter_code%>']").setAttribute("selected", "selected")
    </script>
    <script src="./modules/api.js"></script>
    <script src="./modules/zoomer.js"></script>
    <script src="./socket.io.js"></script>
    <script src="./viewer.js"></script>
    <script src="./select.js"></script>
    <script src='./popper.js'></script>
    <script src='./tippy.js'></script>
    <script src='./hotkeys.js'></script>
    <script src='./tagger.js'></script>
    <script src="./nanobar.js"></script>
    <script src="./clusterize.js"></script>
    <script src="./ds.js"></script>
    <script src="./dexie.js"></script>
    <script src="./timeago.js"></script>
    <script src="./modules/selection.js"></script>
    <script src="./modules/navbar.js"></script>
    <script src="./modules/handler.js"></script>
    <script src="./modules/card.js"></script>
    <script src='./modules/app.js'></script>
  </body>
</html>
