<!DOCTYPE html>

<head>
    <title>[% title %]</title>

    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
    <link rel="stylesheet" type="text/css" href="/css/lrr.css?[% version %]" />
    <link rel="stylesheet" type="text/css" href="/css/config.css?[% version %]" />

    <link rel="stylesheet" type="text/css" href="./css/vendor/fontawesome-all.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/vendor/ReactToastify.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/vendor/sweetalert2.min.css" />
    [% csshead %]

    <script src="./js/vendor/jquery.min.js" type="text/javascript"></script>
    <script src="/js/vendor/preact.umd.js" type="text/JAVASCRIPT"></script>
    <script src="/js/vendor/hooks.umd.js" type="text/JAVASCRIPT"></script>
    <script src="/js/vendor/compat.umd.js" type="text/JAVASCRIPT"></script>
    <script>window.React = window.preactCompat; window.react = window.preactCompat;</script>
    <script src="/js/vendor/clsx.min.js" type="text/JAVASCRIPT"></script>
    <script src="/js/vendor/react-toastify.umd.js" type="text/JAVASCRIPT"></script>
    <script src="/js/vendor/sweetalert2.min.js" type="text/JAVASCRIPT"></script>

    <script src="./js/common.js?[% version %]" type="text/javascript"></script>
    <script src="./js/server.js?[% version %]" type="text/javascript"></script>
    <script src="./js/reader.js?[% version %]" type="text/javascript"></script>

	<script src="/js/jxl.js" type="text/JAVASCRIPT"></script>
	<script src="/js/translation.js?[% version %]" async></script>

    <script type="module">
        import('./js/vendor/fscreen.esm.js').then( r => {
            window.fscreen = r.default;
            Reader.initializeAll();
        })
    </script>
    <link rel="stylesheet" type="text/css" href="eHunter/style.css" />
    <script type="module" src="eHunter/ehunter.mjs"></script>
</head>

<body>

    <div id="i1" class="sni">
        <div id="i2">
            <h1 id="archive-title">...</h1>

            [% INCLUDE pagesel %] [% INCLUDE arrows %] [% INCLUDE fileinfo %]
        </div>

        <div id="i3" class="loading">
            <div class="loading-overlay">
                <p class="loading-spinner">
                    <i id="spinner" class="fa fa-fan fa-spin"></i>
                </p>
            </div>

            <a id="display">
                <img id="img" class="reader-image" src=""><img id="img_doublepage" class="reader-image" src="">
            </a>

        </div>

        <div id="i4">
            [% INCLUDE fileinfo %] [% INCLUDE pagesel %] [% INCLUDE arrows %]
        </div>

        <div id="i5">
            <div class="sb">
                <a href="./?[% ref_query %]" id="return-to-index" title="Done reading? Go back to Archive Index">
                    <i class="fa fa-angle-down fa-3x"></i>
                </a>
            </div>
        </div>

        <div id="i7" class="if">
            <i class="fa fa-caret-right fa-lg"></i>
            <a id="imgLink" style="cursor:pointer;">View full-size image</a>
            <i class="fa fa-caret-right fa-lg"></i>
            <a href="./random">Switch to another random archive</a>
        </div>

    </div>

    <script>
        // This would be better in the reader.js file, but it's faster to source this data from the server template for now.
        Reader.trackProgressLocally = "[% use_local %]" === "1";
    </script>

    <div id="overlay-shade"></div>
    <div id="archivePagesOverlay" class="id1 base-overlay page-overlay" style="display:none" loaded="false">
        <h2 class="ih" id="archive-title-overlay" style="text-align:center">Archive Overview</h2>
        <div id="tagContainer" class="caption caption-tags caption-reader">
            <br>
            <div style="margin-bottom:16px;">
                <div class="id3 nocrop reader-thumbnail">
                    <img src="./api/archives/[% id %]/thumbnail" />
                </div>

                [% IF userlogged %]
                <div style="display:inline-block; vertical-align: middle;">

                    <h2>Admin Options</h2>

                    <input class="stdbtn" type='button' id="set-thumbnail" value="Set this Page as Thumbnail"
                        style="width:160px" title="Set the currently opened page as the thumbnail for this archive." />
                    <input id="regenerate-cache" class='stdbtn' type='button' value='Clean Archive Cache'
                        style="width:160px" />
                    <br>
                    <input id="edit-archive" class='stdbtn' type='button' value='Edit Archive Metadata'
                        style="width:160px" />
                    <input id="delete-archive" class='stdbtn' type='button' value='Delete Archive'
                        style="width:160px" />

                    <h2>Categories</h2>

                    <div id="archive-categories" style="display:inline-block">
                        [% FOREACH arc_categories %]
                        <div class="gt" style="font-size:14px; padding:4px">
                            <a href="/?c=[% id %]">
                                <span class="label">[% name %]</span>
                                <a href="#" class="remove-category" data-id="[% id %]"
                                    style="margin-left:4px; margin-right:2px">×</a>
                            </a>
                        </div>
                        [% END %]
                    </div>

                    <br />
                    <span>Add to : </span>
                    <select id="category" class="favtag-btn" style="width:200px; margin-right: 8px">
                        <option selected value=""> -- No Category -- </option>
                        [% FOREACH categories %]
                        <option value="[% id %]">[% name %]</option>
                        [% END %]
                    </select>
                    <a class="fas fa-plus" id="add-category" href="#" title="Add Archive to Category"></a>
                </div>
                [% END %]
            </div>

        </div>

        <br><br>

        <h2 class="ih" style="text-align:center">Pages</h2>

        <div id="extract-spinner" style="width: 80%; margin-left: auto; margin-right: auto">
            <p class="loading-spinner">
                <i id="spinner" class="fa fa-dharmachakra fa-4x fa-spin"></i>
            </p>
            Working on it...
        </div>
    </div>
    </div>
    </div>
    <div id="settingsOverlay" class="id1 base-overlay small-overlay" style="display:none">
        [% INCLUDE config %]
    </div>

    <canvas id="dpcanvas" style="display:none" width="100" height="100"></canvas>

    <div id="reader-help" style="display: none;">
        <div class="navigation-help-toast">
            You can navigate between pages using:
            <ul>
                <li>The arrow icons</li>
                <li>The a/d keys</li>
                <li>Your keyboard arrows (and the spacebar)</li>
                <li>Touching the left/right side of the image.</li>
            </ul>
            <br>Other keyboard shortcuts:
            <ul>
                <li>M: toggle manga mode (right-to-left reading)</li>
                <li>O: show advanced reader options.</li>
                <li>P: toggle double page mode</li>
                <li>Q: bring up the thumbnail index and archive options.</li>
                <li>R: open a random archive.</li>
                <li>F: toggle fullscreen mode</li>
            </ul>
            <br>To return to the archive index, touch the arrow pointing down or use Backspace.
        </div>
    </div>

    [% INCLUDE footer %]
</body>

</html>



[% #compute those blocks before getting to the main html %]

<!-- -->
[% BLOCK config %]

<h2 class="ih" style="text-align:center">Reader Options</h2>

<h1 class="ih config-panel">Those options save automatically -- Click around and find out!</h1>

<div id="fit-mode">
    <h2 class="config-panel"> Fit display to </h2>
    <input id="fit-container" class="favtag-btn config-btn" type="button" value="Container">
    <input id="fit-width" class="favtag-btn config-btn" type="button" value="Width">
    <input id="fit-height" class="favtag-btn config-btn" type="button" value="Height">
</div>

<div id="container-width">
    <h2 class="config-panel"> Container Width (in pixels or percentage)</h2>
    <input id="container-width-input" class="stdinput" style="display:inline; width: 70%;"
        placeholder="The default value is 1200px, or 90% in Double Page Mode.">
    <input id="container-width-apply" class="favtag-btn config-btn" type="button" style="display:inline;" value="Apply">
</div>

<div id="toggle-double-mode">
    <h2 class="config-panel"> Page Rendering </h2>
    <input id="single-page" class="favtag-btn config-btn" type="button" value="Single">
    <input id="double-page" class="favtag-btn config-btn" type="button" value="Double">
</div>

<div id="toggle-manga-mode">
    <h2 class="config-panel"> Reading Direction </h2>
    <span class="config-panel"></span>
    <input id="normal-mode" class="favtag-btn config-btn" type="button" value="Left to Right">
    <input id="manga-mode" class="favtag-btn config-btn" type="button" value="Right to Left">
</div>

<div id="preload-images">
    <h2 class="config-panel"> How many images to preload</h2>
    <input id="preload-input" class="stdinput" style="display:inline" placeholder="The default is two images.">
    <input id="preload-apply" class="favtag-btn config-btn" type="button" style="display:inline;" value="Apply">
</div>

<div id="toggle-header">
    <h2 class="config-panel"> Header </h2>
    <input id="show-header" class="favtag-btn config-btn" type="button" value="Visible">
    <input id="hide-header" class="favtag-btn config-btn" type="button" value="Hidden">
</div>

<div id="toggle-overlay">
    <h2 class="config-panel"> Show Archive Overlay by default </h2>
    <span class="config-panel">This will show the overlay with thumbnails every time you open a new Reader page.
    </span>
    <input id="show-overlay" class="favtag-btn config-btn" type="button" value="Enabled">
    <input id="hide-overlay" class="favtag-btn config-btn" type="button" value="Disabled">
</div>


<div id="toggle-progress">
    <h2 class="config-panel"> Progression Tracking </h2>
    <span class="config-panel">Disabling tracking will restart reading from page one every time you reopen the reader.
    </span>
    <input id="track-progress" class="favtag-btn config-btn" type="button" value="Enabled">
    <input id="untrack-progress" class="favtag-btn config-btn" type="button" value="Disabled">
</div>

<div id="toggle-infinite-scroll">
    <h2 class="config-panel"> Infinite Scrolling </h2>
    <span class="config-panel">Display all images in a vertical view in the same page.
    </span>
    <input id="infinite-scroll-on" class="favtag-btn config-btn" type="button" value="Enabled">
    <input id="infinite-scroll-off" class="favtag-btn config-btn" type="button" value="Disabled">
</div>

[% END %]
<!-- -->
[% BLOCK arrows %]
<div class="sn paginator">
    <a class="fa fa-angle-double-left page-link" style="font-size: 1.5em;" value="outer-left"></a>
    <a class="fa fa-angle-left page-link" style="font-size: 1.5em;" value="left"></a>

    <div class="pagecount">
        <span class="current-page">...</span> /
        <span class="max-page">...</span>
    </div>

    <a class="fa fa-angle-right page-link" style="font-size: 1.5em;" value="right"></a>
    <a class="fa fa-angle-double-right page-link" style="font-size: 1.5em;" value="outer-right"></a>
</div>
[% END %]
<!-- -->
[% BLOCK pagesel %]
<div class="absolute-options absolute-left">
    <a class="fa fa-cog fa-2x" id="toggle-settings-overlay" href="#" title="Reader Settings"></a>
    <a class="fa fa-question-circle fa-2x" id="toggle-help" href="#" title="Help"></a>
</div>

<div class="absolute-options absolute-right">
    <a class="fa fa-arrow-right fa-2x reading-direction" href="#" title="Reading Direction"></a>
    <a class="fa fa-th fa-2x" id="toggle-archive-overlay" href="#" title="Archive Overview"></a>
    <a class="fa fa-compress fa-2x" id="toggle-full-screen" href="#" title="FullScreen"></a>
</div>
[% END %]
<!-- -->
[% BLOCK fileinfo %]
<div class="file-info">

</div>
[% END %]
