{% extends 'base.html' %}
{% block title %}{{ course.name }} — Player{% endblock %}
{% block content %}
<div class="lms-layout">
  <div class="lms-main">
    <div class="lms-video-container">
      {% if video_url %}
        <video controls poster="{% if course.cover %}/static/{{ course.cover.name }}{% endif %}">
          <source src="{{ video_url }}" type="video/mp4">
        </video>
      {% else %}
        <div style="padding:2rem; color:var(--text-muted);">Please enroll to access this video.</div>
      {% endif %}
    </div>

    <h2>{{ course.name }}</h2>
    <p class="detail-tagline">{{ course.preview|default:course.info|truncatechars:300 }}</p>
  </div>

  <aside class="lms-sidebar">
    <div class="lms-sidebar-header">
      <strong>Course Contents</strong>
    </div>
    <div class="lms-sidebar-content">
      {% for head, items in videolist.items %}
        <div style="padding:1rem; border-bottom:1px solid var(--border-subtle);">
          <strong>{{ head }}</strong>
          <ul style="margin-top:0.5rem;">
            {% for v in items %}
              <li style="color: {% if v.active %}var(--text-main){% else %}var(--text-dim){% endif %};">{{ v.title }}</li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>
  </aside>
</div>
{% endblock %}