{% include "back_button" %}
  <div class="np-subpage-container np-max-width">
  <div class="global-section-title">
    <span class="lang-en">Achievements</span>
    <span class="lang-es">Logros</span>
  </div>
  <div class="global-section-subtitle">
    <span class="lang-en">Complete learning paths and lessons to unlock new badges.</span>
    <span class="lang-es">Completa rutas de aprendizaje y lecciones para desbloquear nuevas insignias.</span>
  </div>
  {% assign achievments = current_person.properties.achievments | split: "," %}
  {% assign SAWcompleted = false %}

  {% comment %} {% assign LearningSweepstakescompleted = false %} {% endcomment %}

  {% for achievment in achievments %}
    {% if achievment == 'saw_week' %}
      {% assign SAWcompleted = true %}
      {% break %}
    {% endif %}

    {% comment %} {% if achievment == 'learning_sweepstakes' %}
                                    {% assign LearningSweepstakescompleted = true %}
                                    {% break %}
                        {% endif %} {% endcomment %}
  {% endfor %}
  <div class="achievements-carousel-container">
    {% assign displayedCount = 0 %}

      {% if SAWcompleted %}
      <!-- SAW Achievement -->
      <div class="homepage-carrot-achievments-item">
        <img
          src="https://cdn.northpass.io/Instacart/badges/SAW_active.svg"
          alt="SAW completed badge"
          class="carrot-achievment-modal"
          desc-en="Congrats on participating in the 2025 learning sweepstakes!"
          desc-es="¡Felicidades por participar en el reto de aprendizaje 2025!">
        {% assign displayedCount = displayedCount | plus: 1 %}
      </div>
    {% endif %}
  {% comment %} <!-- SAW Achievement -->
                        <div class="homepage-carrot-achievments-item">
                          {% if SAWcompleted %}
                            <img src="https://cdn.northpass.io/Instacart/badges/SAW_active.svg" alt="SAW completed">
                          {% else %}
                            <img
                              class="carrot-achievment-inactive"
                              src="https://cdn.northpass.io/Instacart/badges/SAW_inactive.svg"
                              name-en="Learning Sweepstakes"
                              name-es="Reto de aprendizaje"
                              desc-en="To get this badge, complete the Shopper Appreciation Week Learning path during SAW Week!"
                              desc-es="Para obtener este logro, completa la ruta de aprendizaje de la Semana de agradecimiento al cliente durante la Semana de agradecimiento al cliente!">
                          {% endif %}
                          {% if SAWcompleted %}
                            <img src="https://cdn.northpass.io/Instacart/badges/SAW_active.svg" alt="SAW completed">
                          {% else %}
                            <img
                              class="carrot-achievment-inactive"
                              src="https://cdn.northpass.io/Instacart/badges/SAW_inactive.svg"
                              name-en="Learning Sweepstakes"
                              name-es="Reto de aprendizaje"
                              desc-en="To get this badge, complete the Shopper Appreciation Week Learning path during SAW Week!"
                              desc-es="Para obtener este logro, completa la ruta de aprendizaje de la Semana de agradecimiento al cliente durante la Semana de agradecimiento al cliente!">
                          {% endif %}
                          {% assign displayedCount = displayedCount | plus: 1 %}
              </div> {% endcomment %}
  </div>

</div>

<style>
  .achievements-carousel-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-items: center;
    padding: 20px 31px;

  }

  @media (max-width: 1024px) {
    .achievements-carousel-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>