<!DOCTYPE html>
<html class="reader-bg">
  <head>
    <meta charset="utf-8">
    <meta name="X-UA-Compatible" content="IE=edge">
    <title>Mango</title>
    <meta name="description" content="Mango Manga Server">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
	<link rel="stylesheet" href="<%= base_url %>css/mango.css" />
  </head>

  <body>
	  <script src="<%= base_url %>js/theme.js"></script>
    <div class="uk-section uk-section-default uk-section-small reader-bg">
      <div class="uk-container uk-container-small">
          <%- urls.each_with_index do |url, i| -%>
          <img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img id="<%= reader_urls[i] %>" onclick="showControl(<%= pages.to_a[i] %>);">
          <%- end -%>
          <%- if next_url -%>
          <a class="next-url" href="<%= next_url %>"></a>
          <%- end -%>
      </div>
      <%- if next_entry_url -%>
      <button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= next_entry_url %>')">Next Entry</button>
      <%- else -%>
      <button id="next-btn" class="uk-align-center uk-button uk-button-primary" hidden onclick="redirect('<%= exit_url %>')">Exit Reader</button>
      <%- end -%>
    </div>

    <div id="hidden" hidden></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">Options</h3>
        </div>
        <div class="uk-modal-body">
			<div class="uk-margin">
				<p id="progress-label"></p>
			</div>
          <div class="uk-margin">
            <label class="uk-form-label" for="form-stacked-select">Jump to page</label>
            <div class="uk-form-controls">
              <select id="page-select" class="uk-select">
                <%- (1..entry.pages).each do |p| -%>
                <option value="<%= p %>"><%= p %></option>
                <%- end -%>
              </select>
            </div>
          </div>
        </div>
        <div class="uk-modal-footer uk-text-right">
          <button class="uk-button uk-button-danger" type="button" onclick="redirect('<%= exit_url %>')">Exit Reader</button>
        </div>
      </div>
    </div>
	<script>
		const base_url = "<%= base_url %>"
	</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="<%= base_url %>js/reader.js"></script>
  </body>
</html>
