<div class="np-course-version-outdated-popup np-popup">
  <div class="np-popup-positioner">
    <i
      class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
      data-toggle-class-on-target="np-popup-tooltip--visible"
      data-toggle-target-parent=".np-popup-tooltip"
      data-toggle-outside
      aria-label="New Version Available"
      tabindex="0"
    ></i>
    <div
      class="np-popup-tooltip"
      role="tooltip"
      aria-hidden="true"
    >
      <header class="np-popup-header">
        <i class="np-popup-header-icon fas fa-exclamation-circle"  aria-hidden="true"></i>
        <h3 class="np-popup-header-title">
          {% t .title %}
        </h3>
      </header>
      <div class="np-popup-body">
        <h4>
          {% capture header_text %}
            {% t .body.header %}
          {% endcapture %}
          {{ header_text | replace: "course", "course" }}
          
        </h4>
        <p>
          {% capture body_text %}
            {% t .body.content %}
          {% endcapture %}
          {{ body_text | replace: "course", "course" }}
        </p>
        <a
          class="np-popup-body-button"
          href="{{ path }}"
        >
          {% capture button_text %}
            {% t .body.button %}
          {% endcapture %}
          {{ button_text | replace: "Course", "Course" }}
        </a>
      </div>
      <div class="np-popup-tail"></div>
    </div>
  </div>
</div>
