{% extends "base.html" %}

{% block content %}
    <!-- Root Level Videos -->
    {% if video_structure|selectattr('type', 'equalto', 'video')|list %}
    <div class="folder-section">
        <h2 class="section-title">Videos</h2>
        <div class="video-grid">
            {% for item in video_structure %}
                {% if item.type == 'video' %}
                <div class="video-card" data-bs-toggle="modal" data-bs-target="#videoModal" data-video-url="{{ item.url }}">
                    <div class="video-thumbnail">
                        <img src="{{ item.cover }}" alt="{{ item.name }}">
                        <span class="video-duration">{{ item.duration }}</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar">
                            <i class="fas fa-user text-muted d-flex align-items-center justify-content-center h-100"></i>
                        </div>
                        <div class="video-details">
                            <h3 class="video-title">{{ item.name }}</h3>
                            <div class="channel-name">KYGNus Channel</div>
                            <div class="video-meta">{{ format_views(item.views) }} views • {{ format_date(item.upload_date) }}</div>
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <!-- Folders with Videos -->
    {% for item in video_structure %}
        {% if item.type == 'folder' %}
        <div class="folder-section" id="folder-{{ loop.index }}">
            <h2 class="section-title">{{ item.name }} <span class="badge bg-secondary">{{ item.count }} videos</span></h2>
            <div class="video-grid">
                {% for video in item.contents %}
                <div class="video-card" data-bs-toggle="modal" data-bs-target="#videoModal" data-video-url="{{ video.url }}">
                    <div class="video-thumbnail">
                        <img src="{{ video.cover }}" alt="{{ video.name }}">
                        <span class="video-duration">{{ video.duration }}</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar">
                            <i class="fas fa-user text-muted d-flex align-items-center justify-content-center h-100"></i>
                        </div>
                        <div class="video-details">
                            <h3 class="video-title">{{ video.name }}</h3>
                            <div class="channel-name">KYGNus Channel</div>
                            <div class="video-meta">{{ format_views(video.views) }} views • {{ format_date(video.upload_date) }}</div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    {% endfor %}
{% endblock %}