<div class="course-banner-wrapper course-banner-wrapper-image course-green-card">
  <div class="course-banner width-limit">
    {% if course.promo_video_embed_url.size > 0 %}
      <div class="course-video">
        {{ course.promo_video_embed_url }}
      </div>
    {% else %}
      <img class="course-banner-image" alt="banner image" src="{{ course.image_url }}">
    {% endif %}
    <div class="course-banner-content">
      <div class="course-return">
        <a href="/app/courses">
          <span class="lang-en">« Back to all courses</span>
          <span class="lang-de">« Zurück zu allen Kursen</span>
          <span class="lang-es">« Volver a todos los cursos</span>
          <span class="lang-fr">« Retour à l'ensemble des cours</span>
          <span class="lang-br">« Voltar a todos os cursos</span>
        </a>
      </div>
      <h1 class="course-banner-title">
        {{ course.name }}
      </h1>
      <div class="course-banner-text">
        {{ course.full_description }}
      </div>
      {% comment %}
      Hiding it for now, when reimplementing we need to link it to open academy courses via custom property with enrollemnt link
      <div class="course-share">
        <a class="course-share-item" onclick="window.open(`https://www.facebook.com/sharer/sharer.php?u=${window.location.host}{% route course_enrollment, code: course.enrollment_code %}`,'_blank').focus()" style="color: #1877F2;">
          <i class="fab fa-facebook"></i>
        </a>
        <a class="course-share-item" onclick="window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${window.location.host}{% route course_enrollment, code: course.enrollment_code %}`,'_blank').focus()" style="color: #0A66C2;">
          <i class="fab fa-linkedin"></i>
        </a>
        <a class="course-share-item" onclick="window.open(`https://twitter.com/intent/tweet?url=${window.location.host}{% route course_enrollment, code: course.enrollment_code %}`,'_blank').focus()" style="color: #1DA1F2;">
          <i class="fab fa-twitter"></i>
        </a>
        <a class="course-share-item" onclick="copyToClipboard()" style="color: #26292C;">
          <i class="far fa-link"></i>
        </a>
        <div class="course-copied">
          <span class="lang-en">Link was copied!</span>
          <span class="lang-de">Link wurde kopiert!</span>
          <span class="lang-es">Enlace copiado.</span>
          <span class="lang-fr">Le lien a été copié !</span>
          <span class="lang-br">O link foi copiado!</span>
        </div>
      </div>
      {% endcomment %}
      <div class="button-wrapper">
        {% if current_person.signed_in? %}
          {% if course.enrolled? %}
            <a class="course-banner-button button-large button-1" href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}">
              <span class="lang-en">Continue</span>
              <span class="lang-de">Weiter</span>
              <span class="lang-es">Continúe en</span>
              <span class="lang-fr">Continuer</span>
              <span class="lang-br">Continuar</span>
            </a>
          {% else %}
            <a class="course-banner-button button-large button-1" href="{% route course_enrollment, code: course.enrollment_code %}">
              <span class="lang-en">Start your course</span>
              <span class="lang-de">Starten Sie Ihren Kurs</span>
              <span class="lang-es">Comienza tu curso</span>
              <span class="lang-fr">Commencez votre cours</span>
              <span class="lang-br">Comece seu curso</span>
            </a>
          {% endif %}
        {% else %}
          <a class="course-banner-button button-large button-1"
            {% if current_school.sso_active? %}
              href="#sso-widget"
            {% else %}
              href="{% route course_enrollment, code: course.enrollment_code %}"
            {% endif %}
          >
            <span class="lang-en">Register for free courses</span>
            <span class="lang-de">Anmeldung für kostenlose Kurse</span>
            <span class="lang-es">Inscribirse en cursos gratuitos</span>
            <span class="lang-fr">S'inscrire à des cours gratuits</span>
            <span class="lang-br">Cadastre-se para cursos gratuitos</span>
          </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<style>
  .course-return {
    color: #005AB0;
    margin-bottom: 10px;
  }
  .course-return:hover {
    color: #0070D6;
  }
  .course-share {
    display: flex;
    gap: 7px;
    position: relative;
    width: fit-content;
    margin-bottom: 40px;
  }
  .course-share-item {
    padding: 4px;
    font-size: 24px;
    cursor: pointer;
  }
  .course-copied {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    transition: visibility 0.7s;
    z-index: 10;
    transform: translate(100%);
    white-space: nowrap;
    background: white;
    padding: 8px;
    border-radius: 4px;
  }
  .course-copied-show {
    opacity: 1;
  }
  .course-video {
    height: fit-content;
    flex: 1 1 0px;
    align-self: center;
    margin-bottom: 80px;
  }
  .course-banner-wrapper {
    background: var(--green-light);
  }
  .course-banner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .course-banner-image {
    width: 100%;
    margin-bottom: 20px;
  }
  .course-banner-title {
    color: var(--green);
    font-weight: 700;
  }
  .course-banner-text {
    max-width: 800px;
    margin: 0 auto 20px;
  }
  .course-banner-text * {
    background: none !important;
  }

  @media only screen and (min-width: 1024px) {
    .course-video {
      margin-bottom: 0;
    }
    .course-banner {
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .course-banner-image {
      margin-bottom: 0;
      flex: 1 1 0px;
      width: 0;
      object-fit: contain;
    }
    .course-banner-title {
      margin-bottom: 20px;
    }
    .course-banner-button {
      width: max-content;
    }
    .course-banner-wrapper-image  .course-banner-content {
      flex: 1 1 0px;
      width: 0;
      align-self: center;
    }
    .course-banner-wrapper-image .course-banner {
      display: flex;
      flex-direction: row-reverse;
      gap: 40px;
    }
  }
</style>

<script>
  function copyToClipboard() {
    navigator.clipboard.writeText(window.location.host + "{% route course_enrollment, code: course.enrollment_code %}");
    let copiedInfo = document.querySelector('.course-copied');
    copiedInfo.classList.add('course-copied-show');
    setTimeout(() => {
      copiedInfo.classList.remove('course-copied-show');
    }, 1500);
  }
</script>
