{% extends "layout.html" %}
{% block title %}{{ series_name }} - Reader{% endblock %}

{% block content %}
<!-- Reading progress bar -->
<div id="readerProgressBar" class="reader-progress-bar"></div>
<div class="reader-container">
  <!-- Reader Header -->
  <div class="reader-header">
    <div class="reader-header-left">
      <a href="{{ url_for('main.gallery', tag_id=tag.id) }}" class="reader-back-btn" title="Back to gallery">
        <span class="back-arrow">&larr;</span>
      </a>
      <h1 class="reader-title">{{ series_name }}</h1>
      <span class="reader-page-count">{{ total_pages }} pages</span>
    </div>
    <div class="reader-header-right">
      <div class="reader-jump">
        <label for="pageJumpSelect">Jump to:</label>
        <select id="pageJumpSelect" class="reader-jump-select">
          {% for page in pages %}
            <option value="{{ page.page_number }}" {% if page.page_number == start_page %}selected{% endif %}>
              Page {{ page.page_number }}
            </option>
          {% endfor %}
        </select>
      </div>
      <button id="toggleNavBtn" class="reader-toggle-nav" title="Toggle navigation panel">
        <span class="nav-icon">&#9776;</span>
      </button>
    </div>
  </div>

  <div class="reader-body">
    <!-- Navigation Sidebar (toggleable) -->
    <aside id="readerNav" class="reader-nav">
      <div class="reader-nav-header">
        <h3>Pages</h3>
        <button id="closeNavBtn" class="reader-nav-close">&times;</button>
      </div>
      <div class="reader-nav-thumbs">
        {% for page in pages %}
          <div class="reader-nav-thumb" data-page="{{ page.page_number }}">
            <img src="{{ url_for('main.serve_image', filename=(page.image.thumb_path or page.image.filepath) | replace('/images/', '')) }}" alt="Page {{ page.page_number }}" loading="lazy">
            <span class="thumb-page-num">{{ page.page_number }}</span>
          </div>
        {% endfor %}
      </div>
    </aside>

    <!-- Main Reading Area -->
    <main id="readerMain" class="reader-main">
      <div id="readerContent" class="reader-content">
        {% if pages %}
          {% for page in pages %}
            <div class="reader-page" id="page-{{ page.page_number }}" data-page="{{ page.page_number }}">
              <img src="{{ url_for('main.serve_image', filename=page.image.filepath | replace('/images/', '')) }}"
                   alt="Page {{ page.page_number }}"
                   loading="lazy"
                   data-image-id="{{ page.image.id }}">
            </div>
          {% endfor %}
        {% else %}
          <div class="reader-empty">
            <p>No pages in this series yet.</p>
            <a href="{{ url_for('main.gallery', tag_id=tag.id) }}" class="btn primary-btn">
              Go to gallery to add pages
            </a>
          </div>
        {% endif %}
      </div>

      <!-- Floating page indicator -->
      <div id="floatingPageIndicator" class="floating-page-indicator">
        <span id="currentPageNum">1</span> / {{ total_pages }}
      </div>

      <!-- Quick jump buttons -->
      <div class="reader-quick-nav">
        <button id="scrollToTopBtn" class="reader-quick-btn" title="Go to first page">&uarr; First</button>
        <button id="scrollToBottomBtn" class="reader-quick-btn" title="Go to last page">Last &darr;</button>
      </div>
    </main>
  </div>
</div>

<script>
  window.readerConfig = {
    startPage: {{ start_page }},
    totalPages: {{ total_pages }}
  };
</script>
<script src="{{ url_for('static', filename='js/reader.js') }}"></script>
{% endblock %}