{% extends 'base.html' %}

{% block title %}کلاس ویدیویی | {{ course.name }}{% endblock %}

{% block content %}
<div class="lms-layout">
    <!-- Main Video Player & Lesson Content Area -->
    <div class="lms-main">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <div>
                <a href="{% url 'courses:course_detail' course.id %}" style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem;">
                    <i class="bi bi-arrow-right"></i> بازگشت به معرفی دوره
                </a>
                <h1 style="font-size: 1.8rem; font-weight: 800; margin-top: 0.5rem;">{{ active_video.title|default:course.name }}</h1>
            </div>
            <span class="badge-emerald"><i class="bi bi-shield-check"></i> دانشجوی دوره</span>
        </div>

        <!-- Video Player Frame -->
        <div class="lms-video-container">
            {% if active_video.player_url %}
                {% if '<iframe' in active_video.player_url %}
                    {{ active_video.player_url|safe }}
                {% else %}
                    <iframe src="{{ active_video.player_url }}" allow="autoplay; fullscreen" allowfullscreen></iframe>
                {% endif %}
            {% else %}
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); padding: 2rem; text-align: center;">
                    <i class="bi bi-play-btn-fill" style="font-size: 4rem; color: var(--gold-light); margin-bottom: 1rem;"></i>
                    <h3>یک درس را از فهرست انتخاب کنید</h3>
                    <p style="font-size: 0.9rem; color: var(--text-dim); max-width: 400px; margin-top: 0.5rem;">برای شروع، یکی از ویدیوهای فعال دوره را انتخاب کنید.</p>
                </div>
            {% endif %}
        </div>

        <!-- Downloads & Workbooks -->
        {% if files %}
            <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.5rem; margin-top: 2rem;">
                <h3 style="font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem;">
                    <i class="bi bi-paperclip" style="color: var(--gold-light);"></i> فایل‌های تکمیلی دوره
                </h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
                    {% for file in files %}
                        <div class="download-item">
                            <div>
                                <strong style="font-size: 0.9rem; display: block;">{{ file.title }}</strong>
                                <span style="font-size: 0.75rem; color: var(--text-dim);">حجم: {{ file.file_size }}</span>
                            </div>
                            <a href="{{ file.file_url|default:'#' }}" class="btn-gold" style="padding: 0.35rem 0.75rem; font-size: 0.8rem;">
                                دریافت
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>

    <!-- Right Sidebar Course Curriculum -->
    <div class="lms-sidebar">
        <div class="lms-sidebar-header">
            <h3 style="font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem;">محتوای دوره</h3>
            <div style="background: rgba(255,255,255,0.05); height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem;">
                <div style="width: 45%; height: 100%; background: var(--gold-gradient);"></div>
            </div>
            <span style="font-size: 0.8rem; color: var(--text-dim);">میزان پیشرفت: ۴۵٪</span>
        </div>

        <div class="lms-sidebar-content">
            <div class="syllabus-accordion" style="gap: 0; margin-top: 0;">
                {% for headline in headlines %}
                    <div class="accordion-chapter" style="border-radius: 0; border-x: none;">
                        <div class="chapter-header" style="font-size: 0.9rem;">
                            <span>سرفصل {{ forloop.counter }}: {{ headline.title }}</span>
                        </div>
                        <div class="lesson-list">
                            {% for video in headline.videos.all %}
                                <a href="?v={{ video.id }}" class="lesson-item {% if active_video.id == video.id %}active{% endif %}">
                                    <div style="display: flex; align-items: center; gap: 0.6rem;">
                                        {% if active_video.id == video.id %}
                                            <i class="bi bi-play-circle-fill" style="color: var(--gold-light);"></i>
                                        {% else %}
                                            <i class="bi bi-circle" style="color: var(--text-dim);"></i>
                                        {% endif %}
                                        <span>{{ video.title }}</span>
                                    </div>
                                    <span style="font-size: 0.8rem; color: var(--text-dim);">{{ video.duration }}</span>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}