<section class="section book-landing">
  <div class="container book-landing-container">
    <div class="book-summary-block library-header" style="margin-bottom:2rem;">
      <p class="book-eyebrow">Your Library</p>
      <a class="library-discord" href="https://discord.com/invite/cD9qEsSjUH" target="_blank" rel="noopener">
        <span class="icon"><i class="ph ph-discord-logo"></i></span>
        <span>Join the community</span>
      </a>
    </div>

    {% if not books %}
      <p class="is-size-6" style="opacity:.65;margin-bottom:1rem;">
        Your library is empty. Add a book you downloaded from Gumroad.
      </p>
    {% endif %}

    <div class="columns is-multiline" style="margin-top:1rem;">
      {% for b in books %}
        <div class="column is-half">
          <div class="box library-card{% if not b.has_readable %} library-card--incompatible{% endif %}">
            <div class="library-card__menu">
              <button type="button" class="library-card__menu-btn" aria-haspopup="true" aria-expanded="false"
                      title="Options" aria-label="Book options" onclick="toggleCardMenu(this)">
                <i class="ph ph-dots-three"></i>
              </button>
              <div class="library-card__menu-list" role="menu" hidden>
                <form method="post" action="/book/{{ b.id }}/delete"
                      onsubmit="return confirm('Remove {{ b.title }} and all its versions from your library?');">
                  <button type="submit" class="library-card__menu-item" role="menuitem">
                    <i class="ph ph-trash"></i><span>Delete</span>
                  </button>
                </form>
              </div>
            </div>

            {% if b.has_readable %}
              <a href="/book/{{ b.id }}" class="library-card__link">
                {% if b.cover %}
                  <img src="{{ b.cover }}" alt="{{ b.title }} cover" loading="lazy" class="library-card__cover" />
                {% endif %}
                <div>
                  <p class="title is-5" style="margin-bottom:.25rem;">{{ b.title }}</p>
                  {% if b.subtitle %}<p class="subtitle is-6" style="margin-bottom:.4rem;">{{ b.subtitle }}</p>{% endif %}
                  <p class="is-size-7" style="opacity:.6;">
                    {{ b.chapters }} chapters · v{{ b.latest }}{% if b.version_count > 1 %} · {{ b.version_count }} versions{% endif %}
                  </p>
                </div>
              </a>
            {% else %}
              <div class="library-card__link" style="cursor:default;">
                <div class="library-card__cover library-card__cover--placeholder"><i class="ph ph-book"></i></div>
                <div>
                  <p class="title is-5" style="margin-bottom:.25rem;">{{ b.title }}</p>
                  {% if b.subtitle %}<p class="subtitle is-6" style="margin-bottom:.4rem;">{{ b.subtitle }}</p>{% endif %}
                  <p class="is-size-7" style="opacity:.6;">Update the app to open this</p>
                </div>
              </div>
            {% endif %}

            {% if b.too_new %}
              <button type="button" class="library-card__warn" aria-label="A newer version is available"
                      title="A newer version is available. Tap to learn how to open it"
                      onclick="document.getElementById('incompat-{{ b.id }}').classList.add('is-active')">
                <i class="ph ph-warning-circle"></i>
              </button>
            {% endif %}
          </div>
        </div>
      {% endfor %}

      <div class="column is-half">
        <form method="post" action="/upload" enctype="multipart/form-data" class="add-book-form">
          <label class="box add-book-card" title="Add a book">
            <input type="file" name="book" accept=".aibodh" hidden onchange="this.form.submit()">
            <span class="add-book-plus icon"><i class="ph ph-plus"></i></span>
            <span>
              <span class="title is-6" style="display:block;margin-bottom:.15rem;">Add a book</span>
              <span class="is-size-7" style="opacity:.6;">Open a .aibodh file from Gumroad</span>
            </span>
          </label>
        </form>
      </div>
    </div>
  </div>
</section>

{% for b in books %}{% if b.too_new %}
  <div class="modal" id="incompat-{{ b.id }}">
    <div class="modal-background" onclick="document.getElementById('incompat-{{ b.id }}').classList.remove('is-active')"></div>
    <div class="modal-content aibodh-modal-content">
      <div class="box incompat-modal">
        <button type="button" class="aibodh-modal__close" aria-label="Close"
                onclick="document.getElementById('incompat-{{ b.id }}').classList.remove('is-active')">
          <i class="ph ph-x"></i>
        </button>
        <p class="incompat-modal__title">
          <span class="icon"><i class="ph ph-warning-circle"></i></span>
          A newer version is available
        </p>
        <p class="incompat-modal__body">
          {% if b.has_readable %}
            You're reading <strong>{{ b.title }}</strong> (v{{ b.latest }}).
            {% if b.too_new|length == 1 %}A newer version (v{{ b.too_new[0].version }}) is ready{% else %}Newer versions are ready{% endif %},
            but it needs an updated aibodh app to open.
          {% else %}
            <strong>{{ b.title }}</strong> needs an updated aibodh app to open.
          {% endif %}
        </p>
        <p class="incompat-modal__hint">Update the app, then reopen it. Paste this in your terminal:</p>
        <div class="update-notice__cmd">
          <code>{{ update_cmd }}</code>
          <button type="button" class="update-notice__copy" title="Copy" aria-label="Copy command"
                  onclick="navigator.clipboard&amp;&amp;navigator.clipboard.writeText('{{ update_cmd }}');this.querySelector('i').className='ph ph-check';">
            <i class="ph ph-copy"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
{% endif %}{% endfor %}

<script>
  function toggleCardMenu(btn) {
    var list = btn.nextElementSibling;
    var isOpen = !list.hasAttribute('hidden');
    document.querySelectorAll('.library-card__menu-list').forEach(function (m) {
      m.setAttribute('hidden', '');
      if (m.previousElementSibling) m.previousElementSibling.setAttribute('aria-expanded', 'false');
    });
    if (!isOpen) {
      list.removeAttribute('hidden');
      btn.setAttribute('aria-expanded', 'true');
    }
  }
  document.addEventListener('click', function (e) {
    if (!e.target.closest('.library-card__menu')) {
      document.querySelectorAll('.library-card__menu-list').forEach(function (m) {
        m.setAttribute('hidden', '');
        if (m.previousElementSibling) m.previousElementSibling.setAttribute('aria-expanded', 'false');
      });
    }
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      document.querySelectorAll('.library-card__menu-list').forEach(function (m) { m.setAttribute('hidden', ''); });
    }
  });
</script>
