{% extends 'base.html' %}
{% block title %}Courses | 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-2 sm:px-0">
  <div class="max-w-5xl mx-auto">
    <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-graduation-cap text-3xl text-primary"></i>
      </div>
      <h2 class="text-3xl sm:text-4xl font-extrabold mb-2">Explore Our Courses</h2>
      <p class="text-base-content/70 max-w-xl mx-auto">Choose from a variety of short and learning courses designed to boost your English skills at every level.</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
          <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-accent/10"><i class="fas fa-bolt text-accent"></i></span>
          Short Courses
        </h3>
        {% for course in short_courses %}
          <div class="theme-card p-6 mb-6 shadow-lg hover:shadow-xl transition-all group relative overflow-hidden">
            <div class="flex items-center gap-3 mb-2">
              <span class="badge badge-accent text-xs font-semibold">Short</span>
              <i class="fas fa-lightbulb text-accent"></i>
            </div>
            <h4 class="text-lg font-bold mb-1 group-hover:text-accent transition">{{ course.title }}</h4>
            <p class="mb-3 text-base-content/80">{{ course.description }}</p>
            <a href="{{ url_for('student.course_outline', course_type='short', course_id=course.id) }}" class="btn btn-accent btn-sm font-semibold px-4 py-2 mt-2">View Outline <i class="fas fa-arrow-right ml-2"></i></a>
            <div class="absolute right-0 top-0 opacity-10 text-7xl pointer-events-none select-none"><i class="fas fa-bolt"></i></div>
          </div>
        {% else %}
          <p class="text-gray-500">No short courses available.</p>
        {% endfor %}
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
          <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/10"><i class="fas fa-book-open text-primary"></i></span>
          Learning Courses
        </h3>
        {% for course in learning_courses %}
          <div class="theme-card p-6 mb-6 shadow-lg hover:shadow-xl transition-all group relative overflow-hidden">
            <div class="flex items-center gap-3 mb-2">
              <span class="badge badge-primary text-xs font-semibold">Learning</span>
              <i class="fas fa-book text-primary"></i>
            </div>
            <h4 class="text-lg font-bold mb-1 group-hover:text-primary transition">{{ course.title }}</h4>
            <p class="mb-3 text-base-content/80">{{ course.description }}</p>
            <a href="{{ url_for('student.course_outline', course_type='learn', course_id=course.id) }}" class="btn btn-primary btn-sm font-semibold px-4 py-2 mt-2">View Outline <i class="fas fa-arrow-right ml-2"></i></a>
            <div class="absolute right-0 top-0 opacity-10 text-7xl pointer-events-none select-none"><i class="fas fa-book-open"></i></div>
          </div>
        {% else %}
          <p class="text-gray-500">No learning courses available.</p>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}