{% 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 your Calibre OPDS catalog and queue downloads directly into the conversion wizard.</p>
  {% 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="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>
  {% endif %}
</section>
{% endblock %}

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