imagerepo/app/templates/_gallery_modal.html

<!-- /app/templates/_gallery_modal.html -->
<div id="imageModal" class="modal">
  <div class="modal-content">
    <button id="modalClose" class="modal-close-btn" title="Close (ESC)">×</button>
    <button id="modalPrev" class="modal-button modal-prev">‹</button>
    <button id="modalNext" class="modal-button modal-next">›</button>
    <span class="modal-close-hint">ESC to close</span>

    <div class="modal-body">
      <div id="modalImageWrapper" class="modal-image-wrapper">
        <img id="modalImage" src="" alt="Full View">
      </div>

      <div id="modalTagEditor" class="tag-editor" data-image-id="">
        <div id="modalSeriesInfo" class="modal-series-info" style="display: none;">
          <div class="series-info-row">
            <span class="series-info-label">📚 Page</span>
            <input type="number" id="modalPageNumber" min="1" class="series-page-input">
            <span class="series-info-label">of</span>
            <a id="modalSeriesName" href="#" class="series-info-link"></a>
            <button id="updatePageBtn" class="btn-small" title="Update page number">Save</button>
            <span id="pageUpdateStatus" class="page-update-status"></span>
          </div>
        </div>
        <div id="modalTagList" class="tags"></div>
        <form id="modalTagForm" class="tag-form" autocomplete="off">
          <div class="tag-form-wrapper">
            <input type="text" id="tagInput" name="name" placeholder="Add tag..." autocomplete="off">
            <div id="tagAutocomplete" class="tag-autocomplete"></div>
          </div>
          <button type="submit">Add</button>
        </form>
      </div>
    </div>
  </div>
</div>