{% extends "base.html" %}

{% block title %}
Zacufilms | Gospel Videos
{% endblock %}

{% block content %}

<style>
/* ============================= */
/* FEATURED CAROUSEL */
/* ============================= */

body {
    background-color: #0f0f0f;
    color: #fff;
}
.navbar-brand {
    font-weight: 900;
    font-size: 1.7rem;
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

/* ============================= */
/* SECTION HEADER */
/* ============================= */
.section-header {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 16px;
}

/* ============================= */
/* HORIZONTAL VIDEO ROW */
/* ============================= */
.video-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
}

.video-row::-webkit-scrollbar {
    height: 8px;
}
.video-row::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}

/* ============================= */
/* VIDEO CARD */
/* ============================= */
.video-card {
    width: 260px;
    flex-shrink: 0;
    background: #0f172a;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.video-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.video-info {
    padding: 10px 12px;
}

.video-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.video-meta {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media (max-width: 768px) {
    .carousel-item img {
        height: 240px;
    }

    .video-card {
        width: 200px;
    }
}
</style>

<!-- ========================= -->
<!-- FEATURED VIDEOS -->
<!-- ========================= -->
{% if featured_videos %}
<div id="featuredCarousel"
     class="carousel slide mb-5 shadow"
     data-bs-ride="carousel">

    <div class="carousel-inner">

        {% for video in featured_videos %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
            <a href="{{ url_for('video_page', video_id=video.video_id) }}">
                <img src="https://img.youtube.com/vi/{{ video.video_id }}/maxresdefault.jpg"
                     alt="{{ video.title }}">
            </a>

            <div class="carousel-caption text-start">
                <div class="bg-dark bg-opacity-75 p-3 rounded">
                    <h5 class="fw-bold mb-0">{{ video.title }}</h5>
                </div>
            </div>
        </div>
        {% endfor %}

    </div>

    <button class="carousel-control-prev"
            type="button"
            data-bs-target="#featuredCarousel"
            data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>

    <button class="carousel-control-next"
            type="button"
            data-bs-target="#featuredCarousel"
            data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>

</div>
{% endif %}

<!-- ========================= -->
<!-- CATEGORY SECTIONS (PARENT ONLY) -->
<!-- ========================= -->
{% for block in homepage_data %}
    {% if block.category.parent_id is none %} {# Only parent categories #}
    <div class="mb-5">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="section-header">
                {{ block.category.name }}
            </div>

            <a href="{{ url_for('category_landing_page', category_slug=block.category.slug) }}"
               class="text-primary text-decoration-none">
                <button>View All →</button>
            </a>
        </div>

        {% if block.parent_videos %}
        <div class="video-row">
            {% for v in block.parent_videos %}
            <div class="video-card"
                 onclick="location.href='{{ url_for('video_page', video_id=v.video_id) }}'">

                <img class="video-thumb"
                     src="https://img.youtube.com/vi/{{ v.video_id }}/hqdefault.jpg"
                     alt="{{ v.title }}">

                <div class="video-info">
                    <div class="video-title">{{ v.title }}</div>
                    <div class="video-meta">
                        {{ v.views or 0 }} views
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

    </div>
    {% endif %}
{% endfor %}

{% endblock %}