{% extends 'base.html' %}

{% block title %}{{ course.name }} — Course Details{% endblock %}

{% block content %}
<section class="detail-hero">
  <div class="detail-grid">
    <div class="detail-main">
      <h1>{{ course.name }}</h1>
      <p class="detail-tagline">{{ course.preview|default:course.info|truncatechars:200 }}</p>

      <div class="syllabus-accordion">
        {% for head, items in videolist.items %}
          <div class="accordion-chapter">
            <div class="chapter-header">{{ head }}</div>
            <div class="lesson-list">
              {% for v in items %}
                <a class="lesson-item{% if v.active %} active{% endif %}" href="#">{{ v.title }}</a>
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>

    <aside>
      <div class="detail-sidebar-card">
        <img src="{% if course.cover %}/static/{{ course.cover.name }}{% else %}https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=800{% endif %}" style="width:100%; border-radius:8px; margin-bottom:1rem;" />
        <div style="margin-bottom:1rem;">
          <strong>Duration:</strong> {{ course.time }}
        </div>
        <div style="margin-bottom:1rem;">
          <strong>Access:</strong> {% if course.free %}Free{% else %}Paid{% endif %}
        </div>
        <div style="margin-bottom:1rem;">
          <div class="price-box">
            {% if course.free %}
              <div class="price-free">FREE</div>
            {% else %}
              <div class="price-current">{{ course.mablagh }}</div>
            {% endif %}
          </div>
        </div>
        <a href="{% url 'aftaportal:shop_submit' %}?id={{ course.course_id }}" class="btn-gold">Enroll Now</a>
      </div>
    </aside>
  </div>
</section>
{% endblock %}