<div class="overview-container">
  <div class="overview-header-container">
    <div class="overview-btn-container">
      <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 4.49991L1 4.49991M1 4.49991L4.33417 1.09082M1 4.49991L4.33417 7.909" stroke="#0F2B46" stroke-linejoin="round"/>
      </svg>
      <a href="/app/catalog" class="overview-back-btn lang-en">Back to all courses</a>
      <a href="/app/catalog" class="overview-back-btn lang-de">Zurück zu allen Kursen</a>
      <a href="/app/catalog" class="overview-back-btn lang-fr">Retour à toutes les formations</a>
      <a href="/app/catalog" class="overview-back-btn lang-jp">すべてのコースに戻る</a>
    </div>
    <div class="overview-heading">
      {{ course.name }}
    </div>
  </div>

  <div class="overview-content-container">
    <div class="content-details">
      <img
        src="{{ course.image_url }}"
        class="np-top-image np-top-image-spacing"
        alt="{{ course.name }}"
      />

      {% include "course_description" %}

      <div class="overview-details-container">
        <div class="overview-detail">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M40 44.0001L8.00001 44L8.00001 42L40 42.0001L40 44.0001Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M24 36C31.732 36 38 29.732 38 22C38 14.268 31.732 8 24 8C16.268 8 10 14.268 10 22C10 29.732 16.268 36 24 36ZM24 38C32.8366 38 40 30.8366 40 22C40 13.1634 32.8366 6 24 6C15.1634 6 8 13.1634 8 22C8 30.8366 15.1634 38 24 38Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M23 21L23 11L25 11L25 21L23 21Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3397 22.2679L35 27.2679L34 29L25.3397 24L26.3397 22.2679Z" fill="#0F2B46"/>
          </svg>
          <div class="detail-content lang-en">
            {{course.properties.course_time}} minutes
          </div>
          <div class="detail-content lang-de">
            {{course.properties.course_time}} Minuten
          </div>
          <div class="detail-content lang-fr">
            {{course.properties.course_time}} minutes
          </div>
          <div class="detail-content lang-jp">
            {{course.properties.course_time}} 分
          </div>
        </div>

        <div class="overview-detail">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M40 44.0033H8V42.0033H40V44.0033Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M34 23H24V21H34V23Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M19 18H14V16H19V18Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M34 30L24 30V28L34 28V30Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M19 25H14V23H19V25Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2368 4.35388C13.4268 4.12943 13.7059 4 14 4H29C29.5523 4 30 4.44772 30 5V10H28V6H14.4637L10 11.2727V31H19V33H9C8.44772 33 8 32.5523 8 32V10.9062C8 10.6696 8.08389 10.4407 8.23677 10.2601L13.2368 4.35388Z" fill="#0F2B46"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M23.2368 9.35388C23.4268 9.12943 23.7059 9 24 9H39C39.5523 9 40 9.44772 40 10V37C40 37.5523 39.5523 38 39 38H19C18.4477 38 18 37.5523 18 37V15.9062C18 15.6696 18.0839 15.4407 18.2368 15.2601L23.2368 9.35388ZM24.4637 11L20 16.2727V36H38V11H24.4637Z" fill="#0F2B46"/>
          </svg>
          <div class="detail-content lang-en">
            {{course.activities_count}} lessons
          </div>
          <div class="detail-content lang-de">
            {{course.activities_count}} Lektionen
          </div>
          <div class="detail-content lang-fr">
            {{course.activities_count}} leçons
          </div>
          <div class="detail-content lang-jp">
            {{course.activities_count}} レッスン
          </div>
        </div>
      </div>

      {% if course.categories.any? %}
          {% include "course_categories" %}
      {% endif %}

      {% if course.instructors.any? %}
        <div class="np-card-content-divider">
          {% include "course_instructors" %}
        </div>
      {% endif %}

      {% if course.events.any? %}
        <div class="np-card-content-divider">
          {% include "course_events" %}
        </div>
      {% endif %}
    </div>
    <div class="content-activities">
      <div class="np-top-cta">
        {% include "course_progress_and_cta" %}
      </div>
      {% include "course_outline" %}
    </div>
  </div>
</div>

<style>
  .overview-back-btn {
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    letter-spacing: -0.01em;
    text-align: center;
    color: #0F2B46;
    text-decoration: none;
  }
  .overview-btn-container {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .overview-heading {
    font-size: 48px;
    font-weight: 320;
    line-height: 50.4px;
    letter-spacing: -0.015em;
    color: #0F2B46;
  }
  .overview-header-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .overview-content-container {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(2,1fr);
    gap: 70px;
  }
  .overview-details-container {
    display: flex;
    gap: 30px;
  }
  .overview-detail {
    display: flex;
    flex-direction: column;
    gap: 13px;
    align-items: start;
  }
  .detail-content {
      font-size: 18px;
      font-weight: 400;
      line-height: 25.2px;
      letter-spacing: -0.01em;
      color: #0F2B46;
  }
  .category-item {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    letter-spacing: -0.01em;
    color: #0F2B46;
    padding: 11px 12px;
    background: #EDEDED;
    border-radius: 4px;
  }
  .overview-categories-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 40px;
  }

  @media only screen and (max-width: 900px) {
  .overview-content-container {
    grid-template-columns: repeat(1,1fr);
  }
}
</style>