<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<script src="qrc:///js/vue.js"></script>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script src="qrc:///js/_contentManager.js"></script>
<script src="qrc:///js/tools.js"></script>
<link rel="stylesheet" type="text/css" href="qrc:///css/_contentManager.css"/>
</head>
<body onload="init()">
<div id="app">
  <div id="searchBar">
    <form>
      <input id="searchInput" type="text" :placeholder="gt('search-files')" oninput="setSearch(this.value)"/>
    </form>
  </div>
  <div id="bookTable">
    <div class="header">
      <span class="tablecell cell0"></span>
      <span v-on:click="sortBookBy('title')" :class="{ sortableBold: isActive('title') }" class="tablecell cell1 sortable"><i :class="{ arrowDown: isUpOrDown('title', true), arrowUp: isUpOrDown('title', false) }"></i> {{ gt("title") }}</span>
      <span v-on:click="sortBookBy('size')" :class="{ sortableBold: isActive('size') }" class="tablecell cell2 sortable"><i :class="{ arrowDown: isUpOrDown('size', true), arrowUp: isUpOrDown('size', false) }"></i> {{ gt("size") }} </span>
      <span v-on:click="sortBookBy('date')" :class="{ sortableBold: isActive('date') }" class="tablecell cell3 sortable"><i :class="{ arrowDown: isUpOrDown('date', true), arrowUp: isUpOrDown('date', false) }"></i> {{ gt("date") }} </span>
      <span class="tablecell cell4"> {{ gt("content-type") }} </span>
      <span class="tablecell cell5 tablerow">
          <button v-on:click="resetSort()"> {{ gt("reset-sort") }} </button>
      </span>
    </div>
    <div id="load-icon" class="loader"></div>
    <div id="bookList" onscroll=scrolled(this)>
      <div id="menu" class="menu">
        <ul class="menu-options">
          <li v-on:click="openBook(getBookFromMousePosition())" class="menu-option local-option">{{ gt("open") }}</li>
          <li v-on:click="eraseBook(getBookFromMousePosition())" class="menu-option local-option">{{ gt("delete") }}</li>
          <li v-on:click="downloadBook(getBookFromMousePosition())" class="menu-option download-option">{{ gt("download") }}</li>
          <li v-on:click="resumeBook(getBookFromMousePosition())" class="menu-option resume-option">{{ gt("resume") }}</li>
          <li v-on:click="pauseBook(getBookFromMousePosition())" class="menu-option pause-option">{{ gt("pause") }}</li>
          <li v-on:click="cancelBook(getBookFromMousePosition())" class="menu-option cancel-option">{{ gt("cancel") }}</li>
        </ul>
      </div>
      <details v-for="book in displayedBooks(books, displayedBooksNb)" class="book">
        <summary v-bind:id="book.id" class="tablerow book-summary">
          <span class="tablecell cell0">
            <img v-if="book.faviconUrl" v-bind:src="'http://' + book.faviconUrl" />
            <img v-else-if="book.faviconMimeType" v-bind:src="'zim://' + book.id + '.favicon.meta'" />
          </span>
          <span class="tablecell cell1">
            {{ book.title }}
          </span>
          <span class="tablecell cell2">
            {{ niceBytes(book.size) }}
          </span>
          <span class="tablecell cell3">
            {{ book.date }}
          </span>
          <span class="tablecell cell4">
            {{ book.tags }}
          </span>
          <span class="tablecell cell5">
            <template v-if="downloads[book.id]" class="line">
              <span>
                {{ niceBytes(downloads[book.id].completedLength) }} / {{ niceBytes(downloads[book.id].totalLength) }}
              </span>
            </template>
            <button v-if="book.path" v-on:click="openBook(book)" class="line">Open</button>
            <button v-if="!book.path && !downloads[book.id]" v-on:click="downloadBook(book)" class="">Download</button>

            <!-- round download progress bar -->
            <template v-if="downloads[book.id]" class="line">
              <div v-on:click.stop.prevent="pauseResumeBook(book)" v-bind:style="{'--download': downloads[book.id].completedLengthInDegree}" class="circle-wrap">
                <div class="circle">
                  <div class="mask full">
                    <div class="fill"></div>
                  </div>
                  <div class="mask half">
                    <div class="fill"></div>
                  </div>
                  <div class="inside-circle">
                    <img v-if="downloads[book.id] && downloads[book.id].status == 'active'" src="qrc:///icons/pause-button.png">
                    <img v-if="downloads[book.id] && downloads[book.id].status == 'paused'" src="qrc:///icons/play-button.png">
                  </div>
                </div>
              </div>
            </template>
            <!-- end  -->

            <img class="cancel-button" v-if="downloads[book.id]" v-on:click.stop.prevent="cancelBook(book)" src="qrc:///icons/cancel-button.png">
          </span>
        </summary>
        <p class="content">
          {{ book.description }}
        </p>
      </details>
    </div>
  </div>
</div>
</body></html>
