{% extends 'base.html' %}
{% block title %}Course Outline | Try English{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-300 py-10 px-4 sm:px-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header Section -->
        <div class="text-center mb-10">
            <div class="inline-flex items-center justify-center bg-primary/10 rounded-full p-4 mb-3">
                <i class="fas fa-list-check text-3xl text-primary"></i>
            </div>
            <h2 class="text-3xl sm:text-4xl font-extrabold mb-2">Course Outline</h2>
            <p class="text-base-content/70 max-w-xl mx-auto">
                Viewing outline for <span class="font-semibold text-primary">{{ course.title }}</span>
            </p>
        </div>

        <!-- Course Outline Display -->
        <div class="bg-base-100 rounded-xl shadow-lg p-6">
            {% if topics %}
                {% set current_section = None %}
                {% for topic in topics %}
                    {% if topic.section_title != current_section %}
                        {% if not loop.first %}
                            </ul>
                        </div>
                        {% endif %}
                        <div class="mb-8 last:mb-0">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/10">
                                    <i class="fas fa-book text-primary"></i>
                                </span>
                                <h3 class="text-xl font-bold">{{ topic.section_title or "Week 1" }}</h3>
                            </div>
                            <ul class="space-y-3 ml-8">
                        {% set current_section = topic.section_title %}
                    {% endif %}
                    <li class="flex items-start gap-3">
                        <div class="mt-1.5">
                            <i class="fas fa-circle-dot text-xs text-primary"></i>
                        </div>
                        <span class="flex-1">{{ topic.title }}</span>
                    </li>
                    {% if loop.last %}
                        </ul>
                    </div>
                    {% endif %}
                {% endfor %}
            {% else %}
                <div class="text-center p-8">
                    <div class="inline-flex items-center justify-center bg-base-200 rounded-full p-4 mb-4">
                        <i class="fas fa-info-circle text-3xl text-base-content/70"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">No Outline Available</h3>
                    <p class="text-base-content/70">
                        This course doesn't have an outline yet. 
                        {% if is_teacher %}
                        <a href="{{ url_for('teacher.add_course_outline', course_type=course_type, course_id=course.id) }}" 
                           class="link link-primary">Add one now</a>
                        {% endif %}
                    </p>
                </div>
            {% endif %}
        </div>

        <!-- Action Buttons -->
        {% if is_teacher %}
        <div class="flex justify-center gap-4 mt-8">
            <a href="{{ url_for('teacher.manage_courses') }}" class="btn btn-ghost">
                <i class="fas fa-arrow-left mr-2"></i> Back to Courses
            </a>
            {% if topics %}
            <a href="{{ url_for('teacher.edit_course_outline', course_type=course_type, course_id=course.id) }}" 
               class="btn btn-primary">
                <i class="fas fa-edit mr-2"></i> Edit Outline
            </a>
            {% endif %}
        </div>
        {% else %}
        <div class="flex justify-center gap-4 mt-8">
            <a href="{{ url_for('student.course_overview', course_type=course_type, course_id=course.id) }}" class="btn btn-ghost">
                <i class="fas fa-arrow-left mr-2"></i> Back to Course
            </a>
            {% if course.enrolled %}
            <a href="{{ url_for('student.start_course', course_type=course_type, course_id=course.id) }}" class="btn btn-primary">
                <i class="fas fa-play mr-2"></i> Start Learning
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}