<main class="video-tutorial-wrapper">
  <div class="video-tutorial container width-limit">
    <div class="video-return">
      <a href="/app/video-tutorials">
        <span class="lang-en">« Back to all videos</span>
        <span class="lang-de">« Zurück zu allen Videos</span>
        <span class="lang-es">« Volver a todos los vídeos</span>
        <span class="lang-fr">« Retour à l'ensemble des vidéos</span>
        <span class="lang-br">« Voltar a todos os vídeos</span>
      </a>
    </div>
    <div class="row video-tutorial-body">
      <div class="video-content col-12 col-md-8">
        <div class="video-player">
          {{ course.promo_video_embed_url }}
        </div>
        <h4 class="video-title">
          {{ course.name }}
        </h4>
        <div class="video-description">
          {{ course.full_description | strip_html }}
        </div>
      </div>
      <div class="video-suggested col-12 col-md-4">
        <div class="video-suggested-title strong">
          <span class="lang-en">Suggested</span>
          <span class="lang-de">Empfohlen</span>
          <span class="lang-es">Sugerencia</span>
          <span class="lang-fr">Suggestion :</span>
          <span class="lang-br">Sugerido</span>
        </div>
        <div class="video-suggested-list-hidden np-hidden">
          {% assign course_cateogries = course.categories |  map: 'id' |  join: '|' %}
          {% for suggested_course in courses.in_catalog %}
            {% if suggested_course.ribbon == "VIDEO" and suggested_course.id != course.id %}
              {% for suggested_course_category in suggested_course.categories %}
                {% if course_cateogries contains suggested_course_category.id %}
                  <a class="video-suggested-course" href="{% route course, id: suggested_course.id %}">
                    <div class="video-suggested-course-image-wrapper">
                      <img class="video-suggested-course-image" img-src="{{ suggested_course.image_url }}" alt="{{ suggested_course.name }}">
                    </div>
                    <div class="video-suggested-course-info">
                      <div class="video-suggested-course-name strong">
                        {{ suggested_course.name }}
                      </div>
                      <div class="video-suggested-course-time">
                        {{ suggested_course.properties.course_time }}
                      </div>
                    </div>
                  </a>
                  {% break %}
                {% endif %}
              {% endfor %}
            {% endif %}
          {% endfor %}
        </div>
        <div class="video-suggested-list">
        </div>
        </div>
    </div>
  </div>
</main>

<style>
  .video-tutorial-wrapper {
    background: var(--green-light);
  }
  .video-tutorial {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .video-return {
    color: #005AB0;
    margin-bottom: 10px;
  }
  .video-return:hover {
    color: #0070D6;
  }
  .video-tutorial-body {
    justify-content: space-between;
  }
  .video-player {
    padding-top: 56.25%; {% comment %} for 16:9 aspect ratio {% endcomment %}
    position: relative;
  }
  .video-player > * {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .video-title {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .video-suggested {
    margin-top: 30px;
  }
  .video-suggested-title {
    margin-bottom: 20px;
  }
  .video-suggested-course {
    display: flex;
    margin-bottom: 20px;
  }
  .video-suggested-course-image-wrapper {
    width: 44%;
    align-self: center;
    min-width: 44%;
  }
  .video-suggested-course-image {
    width: 100%;
  }
  .video-suggested-course-info {
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  .video-suggested-course:hover .video-suggested-course-name {
    text-decoration: underline;
  }
  .video-suggested-course-time {
    color: #656E7A;
  }
  @media only screen and (min-width: 1024px) {
    .video-content {
      padding-right: 27px;
    }
    .video-suggested {
      padding-left: 27px;
    }
    .video-suggested {
      margin-top: 0;
    }
    .video-title {
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .video-return {
      margin-left: 15px;
    }
  }
  @media only screen and (min-width: 1024px) and (max-width: 1400px) {
    .video-suggested-course-image-wrapper {
      width: auto;
    }
    .video-suggested-course-info {
      margin-left: 0;
    }
    .video-suggested-course {
      flex-direction: column;
    }
  }

</style>

<script>
  function createSuggestedTutorials() {
    const suggestedWrapper = document.querySelector('.video-suggested-list-hidden');
    if (suggestedWrapper.childElementCount > 0) {
      const newSuggestedWrapper = document.querySelector('.video-suggested-list');
      for (let i = suggestedWrapper.children.length; i >= 0; i--) {
        suggestedWrapper.appendChild(suggestedWrapper.children[Math.random() * i | 0]);
      }
      Array.from(suggestedWrapper.children).forEach((course, index) => {
        if (index < 5) {
          course.querySelector('img').setAttribute('src', course.querySelector('img').getAttribute('img-src'));
          newSuggestedWrapper.appendChild(course);
        } else {
          course.remove();
        }
      });
    } else {
      suggestedWrapper.parentElement.remove();
    }
  }
  
  addEventListener("DOMContentLoaded", () => {
    document.querySelector('#side-menu-tutorials')?.classList.add('side-menu-link-active');
    document.querySelector('.header-navigation-item[href="/app/video-tutorials"]')?.classList.add('header-navigation-item-active');
    createSuggestedTutorials();
  });
</script>
