

{% if preview_banner %}
  {{ preview_banner }}
{% endif %}

<div class="uk-container uk-container-center uk-padding-large uk-margin-large-top">
  {% comment %} <h4 class="uk-text-muted uk-margin-remove">{{ course.superscript }}</h4> {% endcomment %}
  {% if course.learner_can_retake? %}
    <form action="{{ course.course_attempts_path }}" method="POST" onsubmit="retakeButton.disabled = true;">
      <button type="submit" class="uk-button uk-float-right completion-button completion-button-style" data-test="retake-course-button" name="retakeButton">{{ course.retake_course }}</button>
    </form>
  {% else %}
    <a href="{{ course.outline_path }}" class="uk-button uk-float-right completion-button completion-button-style" data-test="start-course-button">{{ course.start_or_continue }} Course</a>
  {% endif %}

  {% comment %} {% if current_school.filtering_enabled? %}
    <h3 class="uk-margin-remove">{{ course.course_category_names }}</h3>
  {% endif %} {% endcomment %}

  <h1 data-test="course-name" class="uk-margin-remove cover-course-title">{{ course.name }}</h1>
  <div>
  <p class="uk-margin-small-top uk-margin-large-bottom course-time clock-container">  
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g stroke="#e60000">
            <g>
                <g>
                    <g transform="translate(-555 -1347) translate(554 982) translate(1 363) translate(0 2)">
                        <circle cx="10" cy="10" r="9.333"/>
                        <path d="M6 6L10 10 16.667 10M10 3.333L10 4.667M10 16.667L10 15.333M3.333 10L4.667 10"/>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>{{ course.short_description }}</p>
  </div>
  <div class="cover-container">
    <div class="cover-left">
      <div class="course-img-style-mod">      
        <img src="{{ course.featured_image_url }}" />
      <svg viewBox="0 0 36 36" class="percent-circle red">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="{{course.progress}}, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">{{course.progress}}%</text>
      </svg>
     </div>
    <div class="uk-width-medium-1-2 uk-margin-bottom course-overview">
      <article class="uk-article">
        <h3>Course Overview</h3>
        <p>{{ course.full_description }}</p>
      </article>
    </div>
    </div>
        {% if course.has_outline? %}
      <div class="uk-width-medium-1-2 cover-right">

        <h3>{{ course.outline_label }}</h3>
        <ol class="uk-list cover-outline ">
          {% for section in learner_syllabus.sections %}
            <li class="uk-margin-large-bottom">
              <h3><strong>Module {{ forloop.index }}: {{ section.name }}</strong></h3>
              {% if section.will_be_published? %}
                <div class="uk-margin-top">
                  {% t .scheduled_info %} {{ section.published_at }}
                </div>
              {% else %}
                <ol class="uk-list cover-outline-section-activities change-underline-color">
                  {% for activity in section.activities %}
                    <li class="{% if activity.completed? %}completed {% endif %}{% if activity.locked? %}locked{% endif %}" >
                      <svg class = "check-mark" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
    <g fill="none" fill-rule="evenodd">
        <g fill-rule="nonzero">
            <g>
                <g class="outside-circle">
                    <path fill="#FFFFFF" stroke="#444444" d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0z" transform="translate(-728 -327) translate(729 328)"/>
                    <g class="inside-check">
                        <path fill="#444444" d="M10.725.225L3.75 7.2 1.275 4.725c-.3-.3-.75-.3-1.05 0-.3.3-.3.75 0 1.05l3 3c.15.15.3.225.525.225.225 0 .375-.075.525-.225l7.5-7.5c.3-.3.3-.75 0-1.05-.3-.3-.75-.3-1.05 0z" transform="translate(-728 -327) translate(729 328) translate(4 6)"/>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
                      {% if activity.locked? %}
                        <span>
                          {% if activity.milestone? %}
                            <i class="uk-icon-flag"></i>
                          {% endif %}
                          {{ activity.title }}
                        </span>
                      {% else %}
                        <a href="{{ activity.path }}">
                          {% if activity.milestone? %}
                            <i class="uk-icon-flag"></i>
                          {% endif %}
                          {{ activity.title }}
                        </a>
                      {% endif %}
                    </li>
                  {% endfor %}
                </ol>
              {% endif %}
            </li>
          {% endfor %}
        </ol>
      </div>
    {% endif %}

  </div>

