{% include "course_version_outdated_alert"
  , courses: courses.enrolled %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="dashboard-greeting">
    <span class="lang-en">Hi</span>
    <span class="lang-es">Hola</span>
    {% if current_person.first_name %}
      {{ current_person.first_name }}{% endif %}!
  </div>
  <div class="dashboard-quality-score">
    <span class="lang-en">Your quality score is {{ current_person.properties.quality_score | default: "in progress" }} <br>Consider taking some lessons below.</span>
    <span class="lang-es">Tu puntuación de calidad es {{ current_person.properties.quality_score | default: "en progreso" }} <br>Considera tomar algunas lecciones a continuación.</span>
  </div>

  {% include "carrot_button"
    , buttonUrl: "/app"
    , buttonText: "In progress"
    , buttonTextEs: "En progreso" %}

  <div class="row np-flex-center">
    <div class="col-xs-12 col-sm-8">
      <div class="global-section-title">
        <span class="lang-en">Your lessons</span>
        <span class="lang-es">Tus lecciones</span>
      </div>
      {% include "courses_carousel"
        , items: courses.enrolled
        , breakpoint: 1000
        , filterInProgress: false
        , sortByPriority: true %}
      {% if features.learning_paths? %}
        <div class="global-section-title">
          <span class="lang-en">Your learning paths</span>
          <span class="lang-es">Tus rutas de aprendizaje</span>
        </div>
        {% include "learning_paths_carousel"
          , items: learning_paths.enrolled
          , breakpoint: 1000
          , filterInProgress: false
          , sortByPriority: true %}
      {% endif %}

    </div>

    <div class="np-grid-spacing col-xs-12 col-sm-4">
      {% if features.training_events? %}
        <div class="np-hidden-mobile">
          <div class="global-section-title">
            {% t.upcoming_events %}
          </div>
          {% include "training_events_dashboard" %}
        </div>
      {% endif %}
    {% comment %} 
                                                      Uncomment this when we have achievments, instacart wanted achievments not to show if user doesn't have any
                                                      <div>
                                                        <div class="global-section-title">
                                                          Recent Achievments
                                                        </div>
                                                        {% include "achievments_display" %}
                                      </div> {% endcomment %}
    </div>

  </div>

</main>
{% include "footer" %}

<style>
  .dashboard-greeting {
    font-size: 2.2rem;
    font-weight: 700;
    color: {{ color_palette.header_color }};
    /* matches your brand green */
    margin-top: 32px;
    margin-bottom: 8px;
    letter-spacing: -1px;
    line-height: 1.1;
  }

  @media (max-width: 768px) {
    .dashboard-greeting,
    .dashboard-quality-score {
      text-align: center;
    }
    .dashboard-greeting {
      font-size: 1.5rem;
      margin-top: 20px;
    }
  }

  .dashboard-quality-score {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 16px;
  }
</style>