{% include "header" %}
<style>
    h2, h3, li, p{
        color: #202227;
    }
</style>
    <main>
    <h2>{{ custom_page.headline }}</h2>
    <h3>{{ custom_page.subheadline }}</h3>

        
            <div class="np-homepage-featured-empty">
                {% if training_events.enrolled.any? %}
                    <div class="np-resource-title">
                      Registered
                    </div>
                    <div class="np-dashboard-resources">
                      <div class="row row-with-thumbnails">
                        {% for training_event in training_events.enrolled %}
                        <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
                          {% include "cards_training_event" with training_event %}
                        </div>
                        {% endfor %}
                      </div>
                      {% else %}
                      <div class="np-resource-title">
                        Recommended for you
                    </div>
                    
                    </div>
                    {% endif %}
                     <script>
                    window.onload = function(){
                      const registered_label = document.querySelectorAll('.success');
                      registered_label.forEach( registered_label => {
                        if (registered_label.textContent.includes('registered')){
                          registered_label.classList.add('success_green');
                        }
                      })
                    };
                    </script> 
                    
            </div>
            <div style="display:flex; flex-wrap: wrap;">
            {% for course in courses.in_catalog %}      
              {% assign activity_count = 0 %}
              {% for section in course.sections %}
                {% assign activity_count = activity_count | plus: section.activities.size %}
              {% endfor %}
             
                  <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
                  data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
                  <div class="np-card">
                    <div class="np-card-container">
                      {% if course.ribbon %}
                        <div class="np-card-ribbon">
                          {{ course.ribbon }}
                        </div>
                      {% endif %}
                      <img
                        class="np-card-image"
                        alt="{{ course.name }}"
                        src="{{ course.image_url }}"
                      >
                      <div class="card-activity-count">{{ activity_count }}<br><span class="activity-label">Activities</span></div>
                      <div class="np-card-content np-card-content-vertical np-card-padding">
                        <h3 class="np-card-content-title">
                          {{ course.name }}
                        </h3>
                        <div class="np-card-content-subtitle">
                          {{ course.instructor_names }}
                        </div>
                        <div class="np-card-content-footer">
                          <div class="np-card-content-progress np-button-color">
                            {% if course.progress > 0 and course.progress < 100 %}
                              <div class="circle-progress" style="--percentage:{{course.progress}}%;"></div> {% t shared.progress, count: course.progress %}
                              {% else %}
                            {% t shared.progress, count: course.progress %}
                            {% endif %}
                          </div>
                          {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
                          {% if course.has_to_restart? %}
                            {% include "course_version_outdated_popup", path: course_path %}
                          {% endif %}
                          <a class="np-button np-button-wide" href="{{ course_path }}">
                            {% t shared.view %}
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                    
                    
                    </div>
                  </div>               
          {% endfor %}
         
          <h1>Featured</h1>
          {% for course in courses.enrolled%}   
                          
            <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
            data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
              {% include "cards_course" with course %}
            </div>      
                 
    {% endfor %}
    </div>
    <div class="bla-card">
      <div class="bla-header">In-Person Training</div>
      <div class="bla-content">
        <p class="bla-title">Buildertrend University: an in-person deep dive into our software</p>
        <p class="bla-date">January 8–9, 2025<br>January 29–30, 2025</p>
        <button class="bla-cta"><a href="https://buildertrend.com/events/buildertrend-university/?addsrc=add-serve" target="_blank">Register now</a></button>
        <p class="bla-allsessions"><a href="https://buildertrend.com/events/buildertrend-university/?addsrc=add-serve" target="_blank">See all sessions</a></p>
      </div>
            
</main>
{% include "footer" %}
<style>
  .card-activity-count{
    padding-left: 14px;
    margin-top: -70px;
    padding-bottom: 35px;
    font-family: 'GT WALSHEIM';
    color: #666D7C;
    font-weight: 700;
    font-size: 18px;
  }
  .activity-label{
    font-size: 16px;
    font-weight: 400;
  }
  .circle-progress{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(blue 0% var(--percentage), darkgrey var(--percentage) 100%);
    border: 1px solid black;
  }
  .bla-card {
  border-radius: 12px;
  box-shadow: 2px 2px 20px 0px rgba(0, 17, 44, 0.25);
  background-color: #FFFFFF;
}
.bla-header{
  background-color:  #0763FB;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #FFFFFF;
  padding: 8px 0 8px 19px;
  border-radius: 12px 12px 0 0;
}
.bla-content{
  text-align: center;
  padding: 20px;
}
.bla-title{
  font-family: 'GT Walsheim', sans-serif;
  font-size: 22px;
  font-weight: 500;
}
.bla-date{
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  text-align: center;
}
.bla-cta{
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.10);
  background: var(--color-blue-60, #0763FB);
  box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  padding: 9px 18px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  margin: 0 auto;
}
.bla-allsessions{
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
  color: #004FD6;
  position: relative;
}
.bla-cta a {
  text-decoration: none;
  color: #FFFFFF;
}
.bla-allsessions a{
  text-decoration: none;
  color: #004FD6;
}
.bla-allsessions a::after{
  content: url('https://buildertrend.com/wp-content/uploads/2024/12/CTA-Arrow.svg');
  margin-left: 7px;
  bottom: 10px;
  position: absolute;
}
</style>