<!DOCTYPE html>
<html class="reader-bg">

  <% page = "Reader" %>
  <%= render_component "head" %>

  <body style="position:relative;" x-data="readerComponent()" x-init="init($nextTick)" @resize.window="resized()">
    <div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0'">

      <div @keydown.window.debounce="keyHandler($event)"></div>

      <div class="uk-container uk-container-small">
        <div id="alert"></div>
        <div x-show="loading">
          <div :class="alertClass" x-show="msg" uk-alert>
            <p x-text="msg"></p>
          </div>
        </div>
      </div>

      <div
        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
        <div x-show="!loading && mode === 'continuous'" x-cloak>
          <template x-if="!loading && mode === 'continuous'" x-for="item in items">
            <img
              uk-img
              :class="{'uk-align-center': true, 'spine': item.width < 50}"
              :data-src="item.url"
              :width="item.width"
              :height="item.height"
              :id="item.id"
              :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
              @click="clickImage($event)"
              />
          </template>
          <%- if next_entry_url -%>
            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
          <%- else -%>
            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
          <%- end -%>
        </div>

        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">

          <img uk-img :class="{
                               'uk-align-center': true, 
                               'uk-animation-slide-left': flipAnimation === 'left', 
                               'uk-animation-slide-right': flipAnimation === 'right'
                               }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="clickImage($event)" :style="`
                                                                                                                                                                 width:${mode === 'width' ? '100vw' : 'auto'}; 
                                                                                                                                                                 height:${mode === 'height' ? '100vh' : 'auto'}; 
                                                                                                                                                                 margin-bottom:0;
                                                                                                                                                                 max-width:100%;
                                                                                                                                                                 max-height:100%;
                                                                                                                                                                 object-fit: contain;
                                                                                                                                                                 `" />

          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false ^ enableRightToLeft)"></div>
          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true ^ enableRightToLeft)"></div>
        </div>

      </div>
    </div>

    <div id="modal-sections" class="uk-flex-top" uk-modal>
      <div class="uk-modal-dialog uk-margin-auto-vertical">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
          <h3 class="uk-modal-title break-word"><%= entry.display_name %></h3>
          <p class="uk-text-meta uk-margin-remove-bottom break-word"><%= entry.path %></p>
        </div>
        <div class="uk-modal-body">
          <div class="uk-margin">
            <p x-text="`Progress: ${selectedIndex}/${items.length} (${(selectedIndex/items.length * 100).toFixed(1)}%)`"></p>
          </div>
          <div class="uk-margin">
            <label class="uk-form-label" for="page-select">Jump to Page</label>
            <div class="uk-form-controls">
              <select id="page-select" class="uk-select" @change="pageChanged()" x-model="selectedIndex">
                <%- (1..entry.pages).each do |p| -%>
                  <option value="<%= p %>"><%= p %></option>
                <%- end -%>
              </select>
            </div>
          </div>

          <div class="uk-margin">
            <label class="uk-form-label" for="mode-select">Mode</label>
            <div class="uk-form-controls">
              <select id="mode-select" class="uk-select" @change="modeChanged($nextTick)">
                <option value="continuous">Continuous</option>
                <option value="paged">Paged</option>
              </select>
            </div>
          </div>

          <div class="uk-margin" x-show="mode === 'continuous'">
            <label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
            <div class="uk-form-controls">
              <input id="margin-range" class="uk-range" type="range" min="0" max="50" step="5" x-model="margin" @change="marginChanged()">
            </div>
          </div>

          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
            <label class="uk-form-label" for="enable-flip-animation">Enable Flip Animation</label>
            <div class="uk-form-controls">
              <input id="enable-flip-animation" class="uk-checkbox" type="checkbox" x-model="enableFlipAnimation" @change="enableFlipAnimationChanged()">
            </div>
          </div>
          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
            <label class="uk-form-label" for="preload-lookahead" x-text="`Preload Image: ${preloadLookahead} page(s)`"></label>
            <div class="uk-form-controls">
              <input id="preload-lookahead" class="uk-range" type="range" min="0" max="5" step="1" x-model.number="preloadLookahead" @change="preloadLookaheadChanged()">
            </div>
          </div>

          <div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
            <label class="uk-form-label" for="enable-right-to-left">Right to Left</label>
            <div class="uk-form-controls">
              <input id="enable-right-to-left" class="uk-checkbox" type="checkbox" x-model="enableRightToLeft" @change="enableRightToLeftChanged()">
            </div>
          </div>
          <hr class="uk-divider-icon">

          <div class="uk-margin">
            <label class="uk-form-label" for="entry-select">Jump to Entry</label>
            <div class="uk-form-controls">
              <select id="entry-select" class="uk-select" @change="entryChanged()">
                <% entries.each do |e| %>
                  <option value="<%= e.id %>"
                  <% if e.id == entry.id %>
                    selected
                  <% end %>>
                  <%= e.title %>
                  </option>
                <% end %>
              </select>
            </div>
          </div>
        </div>
        <div class="uk-modal-footer uk-text-right">
          <% if previous_entry_url %>
            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= previous_entry_url %>">Previous Entry</a>
          <% end %>
          <% if next_entry_url %>
            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= next_entry_url %>">Next Entry</a>
          <% end %>
          <a class="uk-button uk-button-danger uk-margin-small-bottom uk-margin-small-right" href="<%= exit_url %>">Exit Reader</a>
        </div>
      </div>
    </div>

    <script>
      const base_url = "<%= base_url %>";
      const page = <%= page_idx %>;
      const tid = "<%= title.id %>";
      const eid = "<%= entry.id %>";
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
    <%= render_component "uikit" %>
    <script src="<%= base_url %>js/alert.js"></script>
    <script src="<%= base_url %>js/reader.js"></script>
  </body>

  <style>
img[data-src][src*='data:image'] { background: white; }
img:not(.spine) { width: 100%; }
.reader-bg { background: black; }
  </style>

</html>
