<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Comic Reader</title>
    <meta name="description" content="">
	<meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css"/>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/kthoom.css') }}" type="text/css"/>

    <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/kthoom.js') }}"></script>
    <script>
            document.onreadystatechange = function () {
              if (document.readyState == "complete") {
                init("{{ url_for('get_comic_book', book_id=comicfile, book_format=extension, page=0) }}");
                }                
            };
    </script>    
  </head>
  <body>
    <div id="sidebar">
      <div id="panels">
        <!-- <a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a> -->
        <!-- <a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a> -->
      </div>
      <div id="tocView" class="view">
        <ul id="thumbnails"></ul>
      </div>
      <div id="bookmarksView" class="view">
        <ul id="bookmarks"></ul>
      </div>
    </div>

    <div id="main" class="main">
      <div id="titlebar" class="main">
        <div id="opener">
          <a id="slider" class="icon-menu">Menu</a>
        </div>
        <div id="metainfo">
          <span id="book-title"></span>
          <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
          <span id="chapter-title"></span>
        </div>
        <div id="title-controls">
          <a id="setting" class="icon-cog">Settings</a>
          <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
        </div>

	      <div id="progress" class="hide"></div>
             <div class="progress2" style="display:none">
              <div class="progress-bar" role="progressbar" aria-valuenow="70"
                  aria-valuemin="0" aria-valuemax="100" style="width:70%">
                70%
              </div>
        </div>
	    </div>
      
	    <div id="mainContent">
	      <div id="mainText" style="display:none"></div>
      	<canvas id="mainImage"></canvas>
	    </div>
          <div id="prev" class="arrow" onclick="showPrevPage()">‹</div>
          <div id="next" class="arrow" onclick="showNextPage()">›</div>
    </div>

    <div class="modal md-effect-1" id="settings-modal">
        <div class="md-content">
            <h3>{{_('Settings')}}</h3>
            <div>
              <div class="settings-column">
                <table>
                  <thead>
                    <tr><th colspan="2">{{_('Keyboard Shortcuts')}}</th></tr>
                  </thead>
                  <tbody>
                    <tr><td>&larr;</td> <td>{{_('Previous Page')}}</td></tr>
                    <tr><td>&rarr;</td> <td>{{_('Next Page')}}</td></tr>
                    <tr><td>B</td>      <td>{{_('Scale to Best')}}</td></tr>
                    <tr><td>W</td>      <td>{{_('Scale to Width')}}</td></tr>
                    <tr><td>H</td>      <td>{{_('Scale to Height')}}</td></tr>
                    <tr><td>N</td>      <td>{{_('Scale to Native')}}</td></tr>
                    <tr><td>R</td>      <td>{{_('Rotate Right')}}</td></tr>
                    <tr><td>L</td>      <td>{{_('Rotate Left')}}</td></tr>
                    <tr><td>F</td>      <td>{{_('Flip Image')}}</td></tr>
                  </tbody>
                </table>
              </div>
              <div class="settings-column">
                <table id="settings">
                  <thead>
                    <tr>
                      <th>{{_('Settings')}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>{{_('Theme')}}:</th>
                      <td>
                        <div class="inputs">
                          <label for="lightTheme"><input type="radio" id="lightTheme" name="theme" value="light" /> {{_('Light')}}</label>
                          <label for="darkTheme"><input type="radio" id="darkTheme" name="theme" value="dark" /> {{_('Dark')}}</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>{{_('Scale')}}:</th>
                      <td>
                        <div class="inputs">                              
                          <label for="fitBest"><input type="radio" id="fitBest" name="fitMode" value="66" /> {{_('Best')}}</label>
                          <label for="fitWidth"><input type="radio" id="fitWidth" name="fitMode" value="87" /> {{_('Width')}}</label>
                          <label for="fitHeight"><input type="radio" id="fitHeight" name="fitMode" value="72" /> {{_('Height')}}</label>
                          <label for="fitNative"><input type="radio" id="fitNative" name="fitMode" value="78" /> {{_('Native')}}</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>{{_('Rotate')}}:</th>
                      <td>
                        <div class="inputs">                              
                          <label for="r0"><input type="radio" id="r0" name="rotateTimes" value="0" /> 0&deg;</label>
                          <label for="r90"><input type="radio" id="r90" name="rotateTimes" value="1" /> 90&deg;</label>
                          <label for="r180"><input type="radio" id="r180" name="rotateTimes" value="2" /> 180&deg;</label>
                          <label for="r270"><input type="radio" id="r270" name="rotateTimes" value="3" /> 270&deg;</label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>{{_('Flip')}}:</th>
                      <td>
                        <div class="inputs">                              
                          <label for="vflip"><input type="checkbox" id="vflip" name="vflip" /> {{_('Horizontal')}}</label>
                          <label for="hflip"><input type="checkbox" id="hflip" name="hflip" /> {{_('Vertical')}}</label>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="closer icon-cancel-circled"></div>
        </div>
    </div>
    <div class="overlay"></div>

  </body>
</html>