{% extends 'base.html' %}
{% block title %}{{ course.title }} Lessons | Try English{% endblock %}
{% block content %}
<div class="container mx-auto py-8">
  <h2 class="text-2xl font-bold mb-6 text-center">{{ course.title }} - Lessons</h2>
  <p class="mb-8 text-center text-gray-600">{{ course.description }}</p>
  <div class="max-w-2xl mx-auto">
    {% if topics %}
      <ul class="divide-y divide-gray-200">
        {% for topic in topics %}
          <li class="py-4 flex flex-col md:flex-row md:items-center md:justify-between">
            <div>
              <h3 class="text-lg font-semibold">{{ topic.title }}</h3>
              <span class="badge badge-outline mr-2">{{ topic.category }}</span>
              {% if progress[topic.id] %}
                <span class="text-sm text-success">{{ progress[topic.id].status }}</span>
              {% else %}
                <span class="text-sm text-gray-400">Not Started</span>
              {% endif %}
            </div>
            <div class="mt-2 md:mt-0 flex gap-2">
              <a href="{{ url_for('student.topic_view', topic_id=topic.id) }}" class="btn btn-outline">View</a>
              <a href="{{ url_for('student.reading_stage', topic_id=topic.id) }}" class="btn btn-primary">Start/Continue</a>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-gray-500 text-center">No lessons have been added to this course yet.</p>
    {% endif %}
  </div>
</div>
{% endblock %}