<section class="section book-landing">
  <div class="container book-landing-container">
    <div class="book-summary-block book-header" style="margin-bottom:2rem;">
      <div class="book-header__main">
        <p class="book-eyebrow">Your Ebook</p>
        <h1 class="title is-2 book-title">{{ book_title }}</h1>
        {% if subtitle %}<p class="subtitle is-5 book-subtitle">{{ subtitle }}</p>{% endif %}
      </div>
      <div class="book-header__aside">
        <button type="button" class="button is-small version-btn"
                onclick="document.getElementById('versionModal').classList.add('is-active')">
          <span>v{{ version }}{% if version == versions[0].version %} · latest{% endif %}</span>
          <span class="icon is-small"><i class="ph ph-caret-down"></i></span>
        </button>
      </div>
    </div>

    <div class="modal" id="versionModal">
      <div class="modal-background" onclick="document.getElementById('versionModal').classList.remove('is-active')"></div>
      <div class="modal-content aibodh-modal-content">
        <div class="box version-modal">
          <button type="button" class="aibodh-modal__close" aria-label="Close"
                  onclick="document.getElementById('versionModal').classList.remove('is-active')">
            <i class="ph ph-x"></i>
          </button>
          <p class="version-modal__title">Versions</p>
          <ul class="version-list">
            {% for v in versions %}
              <li class="version-item{% if v.is_current %} is-current{% endif %}{% if not v.readable %} version-item--toonew{% endif %}">
                {% if v.readable %}
                  <a class="version-item__link" href="/book/{{ book_id }}/{{ v.version }}">
                    <span class="version-item__name">v{{ v.version }}</span>
                    <span class="version-item__tags">
                      {% if loop.first %}<span class="version-item__badge">latest</span>{% endif %}
                      {% if v.is_current %}<span class="version-item__badge is-current-badge">current</span>{% endif %}
                    </span>
                  </a>
                {% else %}
                  <div class="version-item__link version-item__link--disabled" title="Packed with a newer aibodh">
                    <span class="version-item__name">v{{ v.version }}</span>
                    <span class="version-item__tags">
                      <span class="version-item__badge is-toonew-badge">update app</span>
                    </span>
                  </div>
                {% endif %}
                {% if versions|length > 1 %}
                  <form method="post" action="/book/{{ book_id }}/{{ v.version }}/delete"
                        onsubmit="return confirm('Remove version {{ v.version }} of this book?');">
                    <button type="submit" class="version-item__remove" title="Remove version" aria-label="Remove version">
                      <i class="ph ph-trash"></i>
                    </button>
                  </form>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
          {% if has_too_new %}
            <p class="version-modal__note">
              Versions marked <strong>update app</strong> are newer than this app can open.
              Update it 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>
          {% endif %}
        </div>
      </div>
    </div>

    <section id="chapters" class="book-chapters-section">
      <div class="level book-chapter-header">
        <div class="level-left">
          <h2 class="title is-3">Chapters</h2>
        </div>
      </div>

      <div class="book-chapter-grid">
        {%- for c in chapters -%}
          <a class="book-chapter-card-link" href="/book/{{ book_id }}/{{ version }}/chapter/{{ c.slug }}">
            <article class="book-chapter-card">
              <figure class="book-chapter-image">
                {%- if c.video -%}
                  <video
                    class="book-chapter-video"
                    data-priority="true"
                    autoplay muted loop playsinline webkit-playsinline
                    preload="auto"{% if c.poster %} poster="{{ c.poster }}"{% endif %}>
                    <source src="{{ c.video }}" type="video/mp4" />
                  </video>
                {%- elif c.poster -%}
                  <img src="{{ c.poster }}" alt="{{ c.card_title }}" loading="lazy" />
                {%- endif -%}
              </figure>
              <div class="book-chapter-body">
                {%- if c.number -%}
                  <p class="book-chapter-number">Chapter {{ c.number }}</p>
                {%- endif -%}
                <h3 class="title is-5">{{ c.card_title }}</h3>
                {%- if c.excerpt -%}
                  <p class="book-chapter-excerpt">{{ c.excerpt }}</p>
                {%- endif -%}
              </div>
            </article>
          </a>
        {%- endfor -%}
      </div>
    </section>
  </div>
</section>
