{% extends 'base.html' %}
{% block title %}Download 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">
    <div class="card bg-base-100 shadow-lg">
      <div class="card-body">
        <h2 class="card-title text-2xl font-bold mb-6">
          <i class="fas fa-file-pdf text-error mr-2"></i>
          Course Outline PDF
        </h2>
        
        <div class="alert alert-info mb-6">
          <i class="fas fa-info-circle"></i>
          <span>We encountered an issue while generating your PDF. You can still view the course outline in your browser.</span>
        </div>
        
        <div class="divider"></div>
        
        <h3 class="text-lg font-semibold mb-4">{{ course.title }}</h3>
        
        {% if course_outline %}
          <div class="space-y-6 mb-6">
            {% for section_title, topics in course_outline.items() %}
              <div class="bg-base-200 p-4 rounded-lg">
                <h4 class="font-bold text-primary mb-2">{{ section_title }}</h4>
                <ul class="list-disc pl-6">
                  {% for topic in topics %}
                    <li>{{ topic.title }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i>
            <span>No outline available for this course.</span>
          </div>
        {% endif %}
        
        <div class="divider"></div>
        
        <div class="flex flex-wrap gap-4 mt-6">
          <a href="{{ url_for('student.course_outline', course_type=course_type, course_id=course.id) }}" class="btn btn-primary gap-2">
            <i class="fas fa-arrow-left"></i>
            Return to Outline
          </a>
          
          <a href="#" onclick="window.print(); return false;" class="btn btn-ghost gap-2">
            <i class="fas fa-print"></i>
            Print this Page
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}