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

{% block extra_head %}
<style>
  /* Timeline styling for outline */
  .timeline-container {
    position: relative;
    padding-left: 2rem;
  }
  .timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    width: 4px;
    background: linear-gradient(to bottom, rgba(var(--p), 0.2), rgba(var(--s), 0.2));
    border-radius: 2px;
  }
  .timeline-section {
    position: relative;
    margin-bottom: 2.5rem;
  }
  .timeline-dot {
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: hsl(var(--p));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    border: 2px solid white;
    box-shadow: 0 0 0 2px rgba(var(--p), 0.3);
  }
  .timeline-content {
    position: relative;
    transition: all 0.3s ease;
  }
  .topic-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
  }
  .topic-item:hover {
    background-color: rgba(var(--p), 0.05);
    transform: translateX(5px);
  }
  .topic-item a {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .topic-number {
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(var(--p), 0.1);
    color: hsl(var(--p));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    margin-right: 0.75rem;
  }
  @media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .timeline-container { padding-left: 2.5rem; }
    body { font-size: 12pt; }
    .card { box-shadow: none !important; border: 1px solid #ddd; }
  }
</style>
{% 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="flex flex-col md:flex-row items-center justify-between mb-8 gap-6">
      <div class="text-center md:text-left">
        <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">Learning path for <span class="font-semibold text-primary">{{ course.title }}</span></p>
      </div>
      
      <!-- Course Info Card -->
      <div class="card bg-base-200/70 shadow-sm max-w-md">
        <div class="card-body p-4">
          <div class="flex items-center gap-3 mb-2">
            <div class="avatar">
              <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                {% if course_type == 'short' %}
                  <i class="fas fa-bolt text-accent text-xl"></i>
                {% else %}
                  <i class="fas fa-book-open text-primary text-xl"></i>
                {% endif %}
              </div>
            </div>
            <div>
              <h3 class="font-bold">{{ course.title }}</h3>
              <div class="text-xs text-base-content/60 flex items-center gap-2">
                <span>{{ course_outline|length }} Sections</span>
                <span class="w-1 h-1 bg-base-content/30 rounded-full"></span>
                <span>{{ topics_count }} Topics</span>
              </div>
            </div>
          </div>
          <div class="flex gap-2 mt-2">
            <a href="{{ url_for('student.download_outline', course_type=course_type, course_id=course.id) }}" class="btn btn-sm btn-primary gap-2">
              <i class="fas fa-download"></i> Download PDF
            </a>
            <a href="{{ url_for('student.courses') }}" class="btn btn-sm btn-ghost gap-2">
              <i class="fas fa-arrow-left"></i> Back
            </a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Course Outline Card -->
    <div class="card bg-base-100 shadow-xl overflow-hidden">
      <!-- Course Outline Header -->
      <div class="bg-gradient-to-r from-primary/10 to-base-200 p-6">
        <div class="flex items-center gap-3">
          <div class="bg-primary/20 p-2 rounded-lg">
            <i class="fas fa-road text-primary text-xl"></i>
          </div>
          <div>
            <h3 class="font-bold text-xl">Learning Journey</h3>
            <p class="text-sm text-base-content/70">Follow this structured path to master your English skills</p>
          </div>
        </div>
      </div>
      
      <!-- Course Outline Content -->
      <div class="p-6">
        {% if course_outline %}
          <div class="timeline-container">
            <div class="timeline-line"></div>
            {% for section_title, topics in course_outline.items() %}
              <div class="timeline-section">
                <div class="timeline-dot">{{ loop.index }}</div>
                <div class="timeline-content">
                  <!-- Section header -->
                  <div class="card bg-base-200/50 mb-4">
                    <div class="card-body py-3 px-4">
                      <h4 class="card-title text-lg text-primary">{{ section_title }}</h4>
                      <p class="text-xs text-base-content/60">{{ topics|length }} topics in this section</p>
                    </div>
                  </div>
                  
                  <!-- Topic list -->
                  <div class="pl-2">
                    {% for topic in topics %}
                      <div class="topic-item">
                        <a href="{{ url_for('student.topic_view', topic_id=topic.id) }}" class="hover:text-primary transition-colors">
                          <span class="topic-number">{{ loop.index }}</span>
                          <span>{{ topic.title }}</span>
                          <span class="flex-grow"></span>
                          <i class="fas fa-chevron-right opacity-50"></i>
                        </a>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-center p-10">
            <div class="inline-flex items-center justify-center bg-warning/10 rounded-full p-4 mb-3">
              <i class="fas fa-exclamation-triangle text-3xl text-warning"></i>
            </div>
            <h4 class="text-xl font-semibold mb-2">No Outline Available</h4>
            <p class="text-base-content/70">This course doesn't have an outline yet. Please check back later.</p>
          </div>
        {% endif %}
      </div>
    </div>
    
    <!-- Print-only header that will only show in PDF -->
    <div class="print-only hidden">
      <div class="text-center my-8">
        <h1 class="text-2xl font-bold">{{ course.title }} - Course Outline</h1>
        <p>Try English Learning Platform</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}