<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tranga</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <topbar>
    <titlebox>
      <img src="media/blahaj.png">
      <span>Tranga</span>
    </titlebox>
    <spacer></spacer>
    <searchdiv>
      <input id="searchbox" placeholder="Filter" type="text">
    </searchdiv>
    <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
  </topbar>
  <viewport>
    <sidebar>
      <background-placeholder></background-placeholder>
      
      <spacer></spacer>
      <p style="text-align: center">Made with Blåhaj 🦈</p>
    </sidebar>
    <content>
      <div id="addPublication">
        <p>+</p>
      </div>
      <publication>
        <img src="media/cover.jpg">
        <publication-information>
          <connector-name class="pill">MangaDex</connector-name>
          <publication-name>Tensei Pandemic</publication-name>
        </publication-information>
      </publication>
    </content>

    <addtask-popup>
      <addtask-background></addtask-background>
      <addtask-window>
        <window-titlebar>
          <p>Add Task</p>
          <img src="media/close-x.svg" alt="Close">
        </window-titlebar>
        <window-content>
          <label for="taskTypes">TaskType</label><select id="taskTypes"></select>
          <label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00" step="3600">
          <label for="connectors">Connector</label>
          <select id="connectors">
            <option value=""></option>
          </select>
          <label for="searchPublicationQuery">Search:</label><input id="searchPublicationQuery" type="text">
          <div id="taskSelectOutput"></div>
        </window-content>
      </addtask-window>
    </addtask-popup>
  </viewport>
  
  <settingstab id="settingstab">

  </settingstab>
  
  <script src="apiConnector.js"></script>
  <script src="interaction.js"></script>
</body>
</html>