<!-- snippets/course-card.liquid -->
<div class="course-card">
  <img src="{{ course.thumbnail }}" alt="{{ course.name }}">
  <h3>{{ course.name }}</h3>
  <div class="progress-bar">
    <div class="progress" style="width: {{ course.user_data.progress }}%"></div>
  </div>
  <p>{{ course.user_data.progress }}% completo</p>
  <a href="/course/{{ course.id }}" class="button">{{ button_text | default: 'Continuar Aprendendo' }}</a>
</div>

{% for course_id in all_courses %}
  {% assign course = all_courses[course_id] %}
  {% render 'course-card', course: course, button_text: 'Ver Curso' %}
{% endfor %}

{% render 'course-card', 
  course: course,
  button_text: 'Começar a Aprender',
  show_progress: false
%}

<div class="course-card">
  <h3>{{ course.name }}</h3>
  
  {% if show_progress %}
    <div class="progress-bar">
      <div class="progress" style="width: {{ course.user_data.progress }}%"></div>
    </div>
  {% endif %}
  
  <a href="/course/{{ course.id }}" class="button">{{ button_text }}</a>
</div>

<a href="/course/{{ course.id }}" class="button {{ button_class | default: 'primary-button' }}">
  {{ button_text | default: 'Ver Curso' }}
</a>

<!-- snippets/image.liquid -->
<img
  src="{{ src }}"
  alt="{{ alt | escape }}"
  {% if class %}class="{{ class }}"{% endif %}
  {% if width %}width="{{ width }}"{% endif %}
  {% if height %}height="{{ height }}"{% endif %}
  {% if lazy_load %}loading="lazy"{% endif %}
/>

{% render 'image', 
  src: product.image, 
  alt: product.title,
  class: 'rounded shadow',
  width: 300,
  height: 200,
  lazy_load: true 
%}