{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid p-0">
    
    <!-- Category Filters -->
    <div class="category-filters">
        <div class="category-badge active">All Galaxies</div>
        {% for category in categories %}
        <div class="category-badge">{{ category.name }}</div>
        {% endfor %}
        <div class="category-badge">Nebulas</div>
        <div class="category-badge">Supernovas</div>
        <div class="category-badge">Dark Matter</div>
        <div class="category-badge">Stellar Events</div>
    </div>

    <!-- Cosmic Shorts Section -->
    <div class="section-header mt-4">
        <h2 class="section-title">Cosmic Shorts</h2>
        <a href="#" class="text-danger text-decoration-none fw-bold">View All <i class="fas fa-arrow-right ms-1"></i></a>
    </div>
    
    <div class="shorts-grid">
        {% for i in "123456" %}
        <div class="short-card">
            <div class="short-overlay">
                <div class="short-title">Diving into the Heart of a Black Hole | Episode {{ i }}</div>
                <div class="small opacity-75"><i class="fas fa-eye me-1"></i> 1.2M views</div>
            </div>
            <!-- Placeholder for short image/video -->
            <div class="w-100 h-100 bg-dark d-flex align-items-center justify-content-center">
                <i class="fas fa-bolt fa-3x text-danger opacity-25"></i>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Main Video Feed -->
    <div class="section-header mt-5">
        <h2 class="section-title">Universal Discovery</h2>
    </div>

    <div class="video-grid">
        {% for video in videos %}
        <div class="video-card" onclick="location.href='{% url 'video_detail' video.id %}'">
            <div class="thumbnail-container">
                {% if video.thumbnail %}
                <img src="{{ video.thumbnail.url }}" alt="{{ video.title }}">
                {% else %}
                <div class="w-100 h-100 bg-dark d-flex align-items-center justify-content-center">
                    <i class="fas fa-meteor fa-3x text-danger opacity-25"></i>
                </div>
                {% endif %}
                <div class="duration-badge">12:45</div>
            </div>
            <div class="video-meta">
                <div class="d-flex gap-3">
                    <div class="flex-shrink-0">
                        <div class="rounded-circle bg-danger bg-opacity-25 d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; border: 1px solid var(--lv-border);">
                            <i class="fas fa-user-astronaut text-danger"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="video-title">{{ video.title }}</h3>
                        <p class="mb-1 text-muted small fw-bold">{{ video.channel.name }}</p>
                        <div class="d-flex gap-2 text-muted x-small">
                            <span>{{ video.views }} views</span>
                            <span>•</span>
                            <span>{{ video.created_at|timesince }} ago</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="fas fa-box-open fa-4x mb-3 text-muted"></i>
            <h3>No cosmic events discovered yet.</h3>
            <p class="text-muted">Be the first to upload to this galaxy!</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
