
<div class="course-card">
  <div class="course-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div class="image-container">
      <img
        class="course-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    </div>
    <div class="np-card-content np-card-padding">
      <h3 class="card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-subtitle">
        {% if course.properties.duration != blank %} 
          {{course.properties.duration}} 
        {% endif %}
      </div>
      <div class="np-card-content-footer">
        {% 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 class="np-card-content-progress np-button-color progress-color">
          {% t shared.progress, count: course.progress %}
          <div class="course-details">

          </div>
        </div>
      </div>
    </div>

    <div class="overlay">
      <div class="card-desc-overlay">
          <div class="card-content-container-overlay">
            <div class="card-title-overlay np-card-content-title">
              <h3 class="card-content-title center-text">{{ course.name }}</h3>
            </div>
            {% if course.properties.duration != blank %} 
            <div class="overlay-time">{{course.properties.duration}} </div>
            {% endif %}
            <div class="card-info-overlay">
                <div class="card-details-overlay">
                    <div class="card-overlay-desc space-between  margin-5">{% if course.short_description != blank %} {{course.short_description}} {%endif%}</div>
                </div>
            </div>
          </div>
          {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
          {% if course.has_to_restart? %}
            {% include "course_version_outdated_popup", path: course_path %}
          {% endif %}
          <div class="card-button-overlay">
              <a class="button-text-overlay" href="{{ course_path }}">{% t shared.view %}</a>
          </div>
      </div>
  </div>

  </div>
  {% for category in course.categories %}
    <span class="course-category">{{category.name}}</span>
  {% endfor %}
</div>

<style>
  .course-category {
    display: none;
  }
  .card-details-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card-overlay-desc {
    margin-bottom: 1rem;
  }
  .course-card {
    height: 100%;
  }
  .overlay-time {
    margin-top: 0.5rem;
    text-align: left;

  }
  .course-card-container {
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
    height: 100%;
    display: flex; 
    flex-direction: column;
    position: relative;
    border-radius: 30px;
  }
  
  .course-card-image {
    display: block;
    border-radius: 30px 30px 0 0;
    height: auto;
    width: 100%;
  
  }
  .progress-color {
    color: #001b38;
  }
  .card-content-container-overlay {
    padding: 1rem 1rem 0 1rem;
  }
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
  }
  .card-info-overlay {
    text-align: left;
}

.card-button-overlay {
    background: #cc0049;
    display: flex;
    align-items: center;
    border-radius: 4px;
    width: 50%;
    justify-content: center;
    margin: 1rem;
    height: 40px;
}
.button-text-overlay {
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  text-align: center;
  color: #fff;
}
.card-desc-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}
.image-container {
  position: relative;
}
.course-card-container:hover .overlay {
  opacity: 1;
  height: 100%;
  border-radius: 30px;
}
.activity-dot {
  font-size: 5px;
  margin-right: 10px;
}
.course-card {
    margin: 1rem;
}
.font-weight-700 {
  font-weight: 700;
}
.font-weight-600 {
  font-weight: 600;
}
.sections-activities {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.activites {
  margin-bottom: 10px;
}
.margin-5 {
  margin: 5px 0;
}
.np-card-content {
  align-items: normal;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}
.card-content-title {
  font-weight: 700;
  color: #1b3e4f;
  font-size: 1.25rem;
}
.np-card-content-footer {
  margin: 0;
}
.center-text {
  text-align: center;
}
.card-overlay-desc p, .card-overlay-desc span{
  color: #1b3e4f !important;
}
</style>