<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tranga</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <wrapper>
    <topbar>
      <titlebox>
        <img alt="website image is Blahaj" src="media/blahaj.png">
        <span>Tranga</span>
      </titlebox>
      <spacer></spacer>
      <searchdiv>
        <label for="searchbox"></label><input id="searchbox" placeholder="Filter" type="text">
      </searchdiv>
      <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
    </topbar>
    <viewport>
      <div id="loaderdiv">
        <blur-background></blur-background>
        <div id="loader"></div>
        <p id="loaderText">Check your Settings > API-URI</p>
      </div>
      <content>
        <div id="addPublication">
          <p>+</p>
        </div>
        <publication onclick="ShowNewMangaSearch()">
          <img alt="cover" src="media/cover.jpg">
          <publication-information>
            <connector-name class="pill">Sample</connector-name>
            <publication-name>Best Manga there is</publication-name>
          </publication-information>
        </publication>
      </content>
      
      <popup id="newMangaPopup">
        <blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
        <div id="newMangaPopupSelector">
          <select id="newMangaConnector" />
          <input type="text" placeholder="Title" id="newMangaTitle" />
          <select id="newMangaTranslatedLanguage">
            <option selected="selected">en</option>
            <option>it</option>
            <option>de</option>
          </select>
        </div>
        <div id="newMangaResult"></div>
      </popup>
      
      <popup id="settingsPopup">
        <blur-background id="blurBackgroundSettingsPopup" onclick="
    settingsPopup.style.display = 'none';"></blur-background>
        <popup-window>
          <popup-title>Settings</popup-title>
          <popup-content>
            <div>
              <p class="title">Download Location:</p>
              <span id="downloadLocation"></span>
            </div>
            <div>
              <p class="title">API-URI</p>
              <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
            </div>
            <div>
              <span class="title">Komga</span>
              <div>Configured: <span id="komgaConfigured">✅❌</span></div>
              <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
              <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
              <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
            </div>
            <div>
              <span class="title">Kavita</span>
              <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
              <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
              <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
              <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
            </div>
            <div>
              <span class="title">Gotify</span>
              <div>Configured: <span id="gotifyConfigured">✅❌</span></div>
              <label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
              <label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
            </div>
            <div>
              <span class="title">LunaSea</span>
              <div>Configured: <span id="lunaseaConfigured">✅❌</span></div>
              <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
            </div>
            <div>
              <span class="title">Ntfy</span>
              <div>Configured: <span id="ntfyConfigured">✅❌</span></div>
              <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
              <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
            </div>
            <div>
              <input type="submit" value="Update" onclick="UpdateSettings()">
            </div>
          </popup-content>
        </popup-window>
      </popup>
		
	  <popup id="publicationViewerPopup">
        <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
        <publication-viewer>
          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
          <publication-information>
            <publication-name id="publicationViewerName">Best Manga there is</publication-name>
            <publication-tags id="publicationViewerTags">A Manga</publication-tags>
            <publication-author id="publicationViewerAuthor">Glax</publication-author>
            <publication-description id="publicationViewerDescription">
              An interesting description. The description is very intriguing, yet wholesome.
            </publication-description>
            <publication-interactions>
              <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
            </publication-interactions>
          </publication-information>
        </publication-viewer>
      </popup>
      
      <popup id="jobStatusView">
        <blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
        <popup-window>
          <div>
            <div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
          </div>
          <div>
            <div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
          </div>
        </popup-window>
      </popup>
    </viewport>
	  
    <footer>
      <div onclick="ShowJobQueue();">
        <img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
      </div>
      <div onclick="ShowJobQueue();">
        <img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
      </div>
      <p id="madeWith">Made with Blåhaj 🦈</p>
    </footer> 
  </wrapper>
  
  <script src="apiConnector.js"></script>
  <script src="interaction.js"></script>
</body>
</html>