videos.html

---
layout: default
title: Video Collection
permalink: /videos/
---

{% assign items_per_page = 1 %}  {# Display 1 video per page #}
{% assign current_page = page.page | default: 1 %} {# Default to 1 if no page is provided #}

{%- comment -%}
  Calculate total pages based on the number of videos
{%- endcomment -%}
{% assign total_videos = site.videos | size %}
{% assign total_pages = total_videos | divided_by: items_per_page | ceil %}

<div class="container">
    <div class="section">
        <h1 class="title">Video Collection</h1>
        <div class="columns is-multiline">
            {% assign offset = items_per_page | times: current_page | minus: items_per_page %}
            {% for video in site.videos offset: offset limit: items_per_page %}
                <div class="column is-full">
                    <div class="card">
                        <div class="card-content">
                            <h2 class="title is-4">
                                <a href="{{ video.url }}">{{ video.title }}</a>
                            </h2>
                            <p>{{ video.description }}</p>
                            <p><strong>Duration:</strong> {{ video.video_duration }}</p>
                            <p><strong>Category:</strong> {{ video.category }}</p>
                            <a href="{{ video.url }}" class="button is-link">Watch Video</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="pagination">
            <ul>
                {% if current_page > 1 %}
                    <li><a href="/videos?page={{ current_page | minus: 1 }}" class="button is-primary">Previous</a></li>
                {% else %}
                    <li><span class="button is-primary" disabled>Previous</span></li>
                {% endif %}

                {% if current_page < total_pages %}
                    <li><a href="/videos?page={{ current_page | plus: 1 }}" class="button is-primary">Next</a></li>
                {% else %}
                    <li><span class="button is-primary" disabled>Next</span></li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>