{% extends "base.html" %}

{% block title %}abogen · Find Books{% endblock %}

{% block content %}
<section class="card">
  <div class="card__title">Find Books</div>
  <p class="card__subtitle">Browse trusted public-domain libraries or drill into your Calibre catalog without leaving abogen.</p>
  <div class="card__body find-books__body">
    <div class="find-books__resources">
      <article class="resource-tile">
        <h2>Standard Ebooks</h2>
        <p>Discover meticulously produced public-domain ebooks with consistent typography, metadata, and clean EPUB sources.</p>
        <p>
          <a class="button" href="https://standardebooks.org/ebooks" target="_blank" rel="noopener">
            Visit standardebooks.org
          </a>
        </p>
        <p class="hint">Opens in a new tab so you can grab EPUB downloads and drag them into abogen.</p>
      </article>

      <article class="resource-tile">
        <h2>Project Gutenberg</h2>
        <p>The world’s largest public-domain ebook library, offering thousands of EPUB and plain-text editions sourced from volunteer transcriptions.</p>
        <p>
          <a class="button" href="https://gutenberg.org/ebooks/" target="_blank" rel="noopener">
            Visit gutenberg.org
          </a>
        </p>
        <p class="hint">Download the EPUB version for best results, then import it into abogen.</p>
      </article>
    </div>

    {% if not opds_available %}
      <div class="alert alert--warning">Enable the Calibre OPDS integration in settings to browse your library here.</div>
    {% else %}
      <div class="find-books__opds">
        <h2>Calibre catalog</h2>
        <p class="hint">Navigate Calibre shelves and queue downloadable titles directly into the conversion wizard.</p>
        <div class="opds-browser" data-role="opds-browser">
          <form class="opds-browser__search" data-role="opds-search">
            <label for="opds-search-input">Search your catalog</label>
            <input type="search" id="opds-search-input" name="q" placeholder="Title, author, or keyword">
            <button type="submit" class="button">Search</button>
            <button type="button" class="button button--ghost" data-action="opds-refresh">Reset</button>
          </form>
          <div class="opds-browser__status" data-role="opds-status"></div>
          <div class="opds-browser__nav" data-role="opds-nav"></div>
          <ul class="opds-browser__results" data-role="opds-results"></ul>
        </div>
      </div>
    {% endif %}
  </div>
</section>
{% endblock %}

{% block scripts %}
  {{ super() }}
  {% if opds_available %}
  <script type="module" src="{{ url_for('static', filename='find_books.js') }}"></script>
  {% endif %}
{% endblock %}