<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  if (window.location.pathname == "/courses/f6f094d1-b229-4ba3-bb49-924d7a313baf/cover" && window.location.hash == "#skip_me")
  {
    window.location.replace("{{ course.outline_path }}");
  }
</script>
<header class="uk-navbar uk-navbar-attached uk-border-bottom learning-header slide" style="background: white !important;">
  <div class="uk-navbar-flip">
    <ul class="uk-navbar-nav">
      <li>
        <a href="{{ routes.my_content_path }}" class="uk-border-left uk-button-small">{% t .exit %}</a>
      </li>
      {% if course.has_forum? %}
        <li>
          <a href="{{ course.forum_path }}" class="uk-border-left uk-button-small">
            <i class="uk-icon-comments-o"></i>
          </a>
        </li>
      {% endif %}
    </ul>
  </div>

  <div class="uk-navbar-content uk-text-center sk-float-remove">
    {% if current_school.logo_url %}
    <a href="/">
      <img id="hh-cc-img"src="{{ current_school.logo_url }}" class="uk-responsive-height">
    </a>

    {% else %}
      {{ current_school.name }}
    {% endif %}
  </div>
</header>

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

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

  {% if current_school.filtering_enabled? %}
    <h3 class="uk-margin-remove">{{ course.course_category_names }}</h3>
  {% endif %}
  <h1 data-test="course-name" class="uk-margin-remove">{{ course.name }}</h1>
  <hr class="uk-article-divider uk-margin-top">

  <div{% if course.has_outline? %} class="uk-grid uk-grid-large"{% endif %}>
      <div class="uk-width-medium-1-2 uk-margin-bottom{% unless course.has_outline? %} uk-container-center{% endunless %}">
      <article class="uk-article">
        <img src="{{ course.featured_image_url }}" />
        <h3>{{ course.about_label }}</h3>
        <p>{{ course.full_description }}</p>
      </article>
      
      {% if course.instructors.count > 0 %}
        <article class="uk-article">
          <h3>{{ course.instructors_title }}</h3>
          {% for instructor in course.instructors %}
            <div>
              <div class="uk-comment-header">
                <img
                  src="{{ instructor.image_url }}"
                  alt="{{ instructor.name }}"
                  class="uk-comment-avatar"
                  width="80">
                <h4 class="uk-comment-title">{{ instructor.name }}</h4>
                <div class="uk-comment-meta">{{ instructor.title }}</div>
              </div>
              <div class="wysiwyg">{{ instructor.bio }}</div>
            </div>
          {% endfor %}
        </article>
      {% endif %}

      <article class="uk-article">
        {{ upcoming_events }}
      </article>


    </div>

    {% if course.has_outline? %}
      <div class="uk-width-medium-1-2">
        <h3>{{ course.progress_title }}</h3>
        {{ course.progress_bar }}

        <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>{{ 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">
                  {% for activity in section.activities %}
                    <li class="{% if activity.completed? %}completed {% endif %}{% if activity.locked? %}locked{% endif %}" >
                      {% 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>
</div>


<style>
  .uk-navbar-nav li a {
    color: black !important;
  }

  .arrow {
    font-size: 10px;
  }
  
  @media screen and (max-width: 850px){
    #hh-cc-img {
      height: 14px !important;
    }
  }
  
  #hh-follow {
    margin-right: 20px;
    background-color: #06B458 !important;
  }
  
</style>
{% for group in current_person.groups %}
  {% if group.enrollment_code == "1817d8c96780f13abbf0f2023e3b26b3bd43d248" %}
      <script>
      $(document).ready(function(){
          $("#hh-cc-img").attr("src", "https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/AllenTate/Tate+Logo+Lockup+2+(1).png");   
      });
      var link = document.querySelector("link[rel~='icon']");
      if (!link) {
          link = document.createElement('link');
          link.rel = 'icon';
          document.getElementsByTagName('head')[0].appendChild(link);
      }
      link.href = 'https://s3-us-west-2.amazonaws.com/static.schoolkeep.com/AllenTate/Tate_University_Logo_Red+with+Grey.png';

      document.title = 'Tate University';
      </script>
      <style>
      .uk-button-primary, .completion-button{
          background: #8b0e04 !important;
          border: 1px solid #8b0e04 !important;
      }
      a:not(.uk-button), .uk-link, .sidebar-nav ul li a:hover, .sidebar-nav ul li a:focus, .sidebar-nav ul li .completed i, .sidebar-nav ul li .completed:hover, .sidebar-nav ul li .completed.active, .footer-navigation i.uk-icon-check-circle-o, .uk-modal-close i {
          color: #8b0e04 !important;
      }
      .uk-progress-bar {
          background-color: #8b0e04;
      }
      .cover-outline-section-activities li.completed:before {
          background: #8b0e04 !important;
          border-color: #8b0e04 !important;
      }
      .cover-outline-section-activities li.completed:after {
          background: #8b0e04 !important;
      }
      
      </style>
  {% endif %}
{% endfor %}