{% extends "base.html" %}

{% block title %}{{ library_title }}{% endblock %}
{% block meta_description %}Browse {{ library_title|lower }} from Radiuma.{% endblock %}

{% block content %}
<section class="page-hero video-library-hero" aria-labelledby="video-library-title">
  <div class="container">
    <div class="page-hero-content page-hero-content--row">
      <div>
        <div class="section-badge">Video library</div>
        <h1 class="page-hero-title" id="video-library-title">{{ library_title }}</h1>
        <p class="page-hero-subtitle">{{ library_description }}</p>
      </div>
      <a href="{{ library_back_url }}" class="btn-ghost">← {{ library_back_label }}</a>
    </div>
  </div>
</section>

<section class="section video-library-section" aria-label="All videos">
  <div class="container">
    <div class="video-library-summary">
      <p><strong>{{ paginator.count }}</strong> video{{ paginator.count|pluralize }}</p>
      {% if paginator.num_pages > 1 %}<span>Page {{ page_obj.number }} of {{ paginator.num_pages }}</span>{% endif %}
    </div>

    <div class="video-library-grid">
      {% for video in videos %}
      <article class="video-library-card">
        {% include "partials/_video_block.html" with video=video compact_header=True %}
      </article>
      {% empty %}
      <div class="glass-card video-library-empty"><h2>No videos available</h2><p>New videos will appear here when they are published.</p></div>
      {% endfor %}
    </div>

    {% if page_obj.has_other_pages %}
    <nav class="video-pagination" aria-label="Video library pages">
      <a class="video-pagination__direction{% if not page_obj.has_previous %} is-disabled{% endif %}" {% if page_obj.has_previous %}href="?page={{ page_obj.previous_page_number }}"{% else %}aria-disabled="true" tabindex="-1"{% endif %}>← Previous</a>
      <ol class="video-pagination__pages">
        {% for page_number in pagination_range %}
          {% if page_number == "…" %}
          <li><span class="video-pagination__ellipsis">…</span></li>
          {% elif page_number == page_obj.number %}
          <li><span class="video-pagination__page is-current" aria-current="page">{{ page_number }}</span></li>
          {% else %}
          <li><a class="video-pagination__page" href="?page={{ page_number }}" aria-label="Go to page {{ page_number }}">{{ page_number }}</a></li>
          {% endif %}
        {% endfor %}
      </ol>
      <a class="video-pagination__direction{% if not page_obj.has_next %} is-disabled{% endif %}" {% if page_obj.has_next %}href="?page={{ page_obj.next_page_number }}"{% else %}aria-disabled="true" tabindex="-1"{% endif %}>Next →</a>
    </nav>
    {% endif %}
  </div>
</section>
{% endblock %}