<script>
  if (window.location.hash.includes("reroute")) {
    window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")
  }
</script>

{% assign catalog_courses = courses.in_catalog %}

{% include "header" %}
{% include "course_header" %}
<main class="np-main np-max-width">
  <div class="course-overview-page" id="course-desktop">
    <div class="course-card-container">
      <div class="course-content-container">
        {% if course.enrolled? %}
          {% if course.properties.talent_lms_course == true and current_person.properties.talent_lms_learner == true %}
            <div class="info-box general">
              <p><strong>You have previously completed this module on TalentLMS</strong><br>Feel free to re-visit this course here on the Knowledge, however any course progression or quiz results from TalentLMS have not and will not be migrated over.</p>
            </div>
          {% endif %}
        {% endif %}

        <div class="course-description-container">
          <div class="card-text">
            {{ course.full_description }}
          </div>
        </div>

        <div class="np-card-content-divider"></div>

        <div class="np-flex">
          {% for instructor in course.instructors %}
            <div class="np-content-instructors-content-item">
              <img
                src="{{ instructor.avatar_url }}"
                class="np-content-instructors-content-image"
                alt="{{ instructor.name }}"
              />
              <div class="np-content-instructors-content-description">
                <div class="np-content-instructors-content-name">
                  {{ instructor.name }}
                </div>
                <div class="np-content-instructors-content-info np-text-light">
                  {{ instructor.title }}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>

        <div class="np-card-content-divider"></div>

        <div class="course-attributes-container">
          <div class="attribute audience">
            <div class="text">Course level:</div>
            <div class="properties">
              <div class="course-overview-properties">
                {{course.properties.experience}}
              </div>         
            </div>
          </div>
          <div class="attribute roles">
            <div class="text">Category:</div>
            <div class="properties"> 
                {% if course.categories.any? %}
                  {% for category in course.categories %}
                    <div class="course-overview-properties">
                      {{ category.name }}
                    </div>
                  {% endfor %}
                {% endif %}
            </div>
          </div>
          <div class="attribute content-type">
            <div class="text">Content type:</div>
            <div class="properties"> 
              <div class="course-overview-properties">
                {{course.properties.content_type}}
              </div>
            </div>
          </div>
          <div class="attribute data-classification">
            <div class="text">Data classification:</div>
            <div class="properties"> 
              <div class="course-overview-properties">
                {{course.properties.data_classification}}
              </div>
            </div>
          </div>
          {% assign pre_requisite = course.properties.pre_requisite | upcase %}
          {% unless pre_requisite == "NONE" %}
            <div class="info-box course">
              <div class="intro"><strong>Pre-requisite:</strong>&nbsp;Complete these Knowledge modules before continuing</div>
              <div class="courses-wrapper">
                {% for catalog_course in catalog_courses %}
                  {% if course.properties.pre_requisite contains catalog_course.id %}
                    <a href="/app/courses/{{catalog_course.id}}">
                      {% assign img_cropped = catalog_course.image_url | replace: '/resize=width:820,height:500', '/resize=width:140,height:140' %} 
                      <img src="{{ img_cropped }}" />
                      <div>
                        <div class="title">{{catalog_course.name}}</div>
                        <div class="subtitle">{{course.short_description}}</div>
                        <div class="level">{{course.properties.experience}}</div>
                      </div>
                    </a>         
                  {% endif %}
                {% endfor %}
              </div>            
            </div>
          {% endunless %}
        </div>
      </div>
      {% unless course.promo_video_embed_url == "" %}
        <div class="video-wrapper">
          <div class="course-video-container">
            {{course.promo_video_embed_url}}
          </div>
        </div>
      {% endunless %}

      <div class="course-desktop-button">
        {% include "course_progress_and_cta" %}
      </div>
      
    </div>
  </div>
</main>

<script>
  const defaultPageTitle = document.title
  const courseName = '{{course.name}}'
  const courseExperience = '{{course.properties.experience}}'
  document.title = `${courseName} (${courseExperience}) | ${defaultPageTitle}`
</script>

<style>
.course-content-container {
  border: 1px solid #EBEAEB;
  border-radius: 4px;
  padding: 24px 16px;
  max-width: 830px;
  margin: 40px 24px;
  width:100%;
}

.course-card-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  padding-bottom:64px;
}
.course-overview-btn-container {
  display: flex;
  justify-content: center;
}

.video-wrapper {
  max-width:780px;
  width:100%;
  padding: 0 24px;
  margin:0 auto 32px;
}

.course-video-container {
  max-width: 780px;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.course-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.properties {
  display: flex;
  flex-wrap: wrap;
}
.attribute {
  display: flex;
  margin: 0 0 24px;
  align-items: center;
}
.course-overview-properties {
  padding: 6px 12px;
  color: #1B13C9;
  background: #EFF8FA;
  border: 1px solid #1B13C9;
  font-weight: 600;
  font-size: 12px;
  border-radius: 18px;
  margin: 4px 8px 4px 0;
}

.attribute.roles,
.attribute.instructors {
  flex-direction: column;
  align-items: flex-start;
}

.attribute.roles .text {
  margin-bottom:12px;
}

.card-heading {
  font-weight: 600;
  font-size: 20px;
  line-height: 23px;
  color: #333132;
  margin-bottom: 24px;
}
.card-text {
  font-weight: 500;
  font-size: 18px;
  line-height: 160%;
  color: #333132;
}
.attribute .text {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: #333132;
  margin-right:8px;
}

.np-content-instructors-content-item {
    margin-top: 8px;
    align-items:center;
}

.np-content-instructors-content-image {
  width:70px;
  height:70px;
}

.np-content-instructors-content-name {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: #333132;
  margin-bottom: 4px;
}

.np-content-instructors-content-info {
  text-transform: uppercase;
  font-size:12px;
}

.info-box {
  padding: 20px 20px 5px 64px;
  position:relative;
}

.info-box:after {
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  top:20px;
  left:20px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position: center;
}

.info-box.general,
.info-box.people,
.info-box.glossary,
.info-box.alert {
  background: #f0f0ff;
  border-left: 4px solid #2d29fc;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
}

.info-box.people {
  background: #ead9e3;
  font-weight: 600;
}

.info-box.glossary {
  background: #e8e8e8;
}

.info-box.alert {
  background: #fff0f0;
  border-left: 4px solid #ff2a26;
}

.info-box p {
  margin-top:0;
}

.info-box.general:after {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.info-box.people:after {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 21V15L3 15V21' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M21 21V15H18.5' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.info-box.glossary:after {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3H6V21L12 17L18 21V3Z' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.info-box.alert:after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.76619 20L12 2.94365L22.2338 20H1.76619Z' stroke='%23990300' stroke-width='2'/%3E%3Cpath d='M12 9V13' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 17H12.01' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.info-box.course {
  background-color:#F5F6FF;
  border-left:4px solid #2E29FC;
}

.info-box.course:after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='album 1'%3E%3Cpath id='Vector' d='M11 3V11L14 8L17 11V3' stroke='%232D29FC' stroke-width='2' stroke-linecap='square'/%3E%3Crect id='Rectangle 566' x='3' y='3' width='18' height='18' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath id='Vector 115' d='M7 3V21' stroke='%232D29FC' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.info-box.course .intro {
  font-size: 16px;
  line-height: 150%;
  margin-bottom:10px;
}

.info-box.course a {
  color:#333132;
  background-color:#fff;
  padding: 15px;
  display:flex;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  margin-bottom:10px;
  width:100%;
  position:relative;
}

.info-box.course a:after {
  content: "";
  position:absolute;
  width:24px;
  height:24px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E");
  background-size:contain;
  background-position:center;
  right:15px;
  bottom:15px;
}

.info-box.course .courses-wrapper {
  display:flex;
  flex-wrap:wrap;
}

.info-box.course img {
  width:140px;
  margin-right:20px;
}

.info-box.course a > div {
  display: flex;
  flex-direction: column;
}

.info-box.course .title {
  color: #242424;
  font-size: 18px;
  line-height:normal;
  font-weight: 600;
  margin-bottom:10px;
}

.info-box.course .subtitle {
  color: #6B686A;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

.info-box.course .level {
  color: #2E29FC;
  font-size: 12px;
  font-weight: 600;
  margin-top:auto;
}

@media (min-width:768px) {
  .course-card-container {
    margin:0 24px;
  }

  .course-content-container {
    padding: 32px 24px;
    margin: 64px auto 32px;
  }

  .attribute.roles,
  .attribute.pre-req,
  .attribute.instructors {
    flex-direction: row;
    align-items: center;
  }

  .attribute.roles .text {
    margin-bottom:0;
  }
  .video-wrapper {
    padding: 0;
  }

  .info-box.course .courses-wrapper {
    margin-left: -10px;
    margin-right: -10px;
  }

  .info-box.course a {
    margin: 0 10px 20px;
    width:calc(50% - 20px);
  }
}

</style>