{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}

<main class="np-main np-homepage">

  {% include "sub_navigation" %}
  <div class="np-homepage-featured np-max-width">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline">
        {{ homepage.featured_courses_headline }}
      </div>
      <div class="np-homepage-subheadline">
        {{ homepage.featured_courses_subheadline }}
      </div>
    </div>
    
    {% assign in_progress_count = 0 %}
    {% assign max_courses = 3 %}
    
    {% for course in courses.enrolled %}
      {% if course.started? and course.completed? == false and in_progress_count < max_courses %}
        {% if in_progress_count == 0 %}
          <div class="np-homepage-featured-courses row">
        {% endif %}
        <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
          {% include "cards_course" with course %}
        </div>
        {% assign in_progress_count = in_progress_count | plus: 1 %}
      {% endif %}
    {% endfor %}
    
    {% if in_progress_count > 0 %}
      </div>
    {% else %}
      <div class="np-homepage-featured-empty">
        <img
          class="np-zero-state-courses"
          alt="No lessons in progress"
        />
        <div class="np-zero-state-text">
          You don't have any lessons in progress yet. Explore a lesson or learning path to get started.
        </div>
      </div>
    {% endif %}
    
    <!-- Explore Buttons -->
    <div class="np-explore-all-lessons-container">
      <a href="/app/courses" class="np-explore-all-lessons-btn np-btn-primary">
        Explore lessons
      </a>
      {% if features.learning_paths? %}
      <a href="/app/learning_paths" class="np-explore-all-lessons-btn np-btn-secondary">
        Explore learning paths
      </a>
      {% endif %}
    </div>
  </div>
</main>
{% include "footer" %}

<style>
  /* Explore Buttons */
  .np-explore-all-lessons-container {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  
  .np-explore-all-lessons-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    min-width: 200px;
    text-align: center;
  }
  
  /* Primary Button - Dark Green */
  .np-explore-all-lessons-btn.np-btn-primary {
    background-color: #013D29;
    color: white;
    border-color: #013D29;
  }
  
  .np-explore-all-lessons-btn.np-btn-primary:hover {
    background-color: #022f20;
    color: white;
    text-decoration: none;
    border-color: #022f20;
  }
  
  /* Secondary Button - Light with Border */
  .np-explore-all-lessons-btn.np-btn-secondary {
    background-color: white;
    color: #013D29;
    border-color: #013D29;
  }
  
  .np-explore-all-lessons-btn.np-btn-secondary:hover {
    background-color: #f8f9fa;
    color: #013D29;
    text-decoration: none;
    border-color: #013D29;
  }
  
  /* Responsive: Side by side on larger screens */
  @media (min-width: 768px) {
    .np-explore-all-lessons-container {
      flex-direction: row;
      justify-content: center;
      gap: 16px;
    }
  }
</style>