<header class="uk-navbar uk-navbar-attached uk-border-bottom learning-header slide">
  <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 %}
      <img src="{{ current_school.logo_url }}" class="uk-responsive-height">
    {% else %}
      {{ current_school.name }}
    {% endif %}
  </div>
</header>

{% include "side_navigation_bar" %}

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

<div class="uk-container uk-container-center uk-padding-large uk-margin-large-top">
  <h4 class="uk-text-muted uk-margin-remove">{{ course.superscript }}</h4>
  {% 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" 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" 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>

      {% if course.discover_events_path %}
        <a href="{{ course.discover_events_path }}" class="uk-padding-left-remove">{% t .see_all_events %}</a>
      {% endif %}
    </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>

  img.uk-responsive-height {
    max-height: 95% !important;
  }

  #learning {
    margin-left: 160px;
  }

  @media only screen and (max-width: 798px) {
  
    #learning {
      margin-left: 0px;
    }
  }

  @media only screen and (max-width: 1024px) {
  
  .uk-panel-badge {
      right: 10px !important;
  }
  }
  @media only screen and (max-width: 600px) {
  
  .uk-panel-badge {
      right: 4px !important;
  }
  }

.sainte-colombe-regular {
    font-family: "Sainte Colombe Regular" !important;
}

.sainte-colombe-medium {
    font-family: "Sainte Colombe Medium" !important;
}

.myriad-pro-light {
    font-family: "Myriad Pro Regular" !important;
    font-weight: lighter !important;
}

.euclid-circular-regular {
    font-family: "Euclid Circular Regular" !important;
}

.euclid-circular-light {
    font-family: "Euclid Circular Light" !important;
}

.euclid-circular-semibold {
    font-family: "Euclid Circular Semibold" !important;
}

.euclid-circular-bold {
    font-family: "Euclid Circular Bold" !important;
}


@font-face {
    font-family: "Sainte Colombe Regular";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-regular.otf) format('opentype');
    font-style: normal;
}

@font-face {
    font-family: "Sainte Colombe Medium";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-medium.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular Regular";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Regular.otf) format("opentype");
    font-style: normal;
}
@font-face {
    font-family: "Euclid Circular Light";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Light.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular Semibold";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Semibold.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular Bold";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Bold.otf) format("opentype");
    font-style: normal;
}

/* side navigation bar */
.sidenav {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #100B28;
    overflow-x: hidden;
    padding-top: 20px;
}
  
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    display: block;
}

.side-navbar-item {
    font-size: 18px !important;
    color: white !important;
}

.side-navbar-item:hover {
    color: rgba(255, 255, 255, 0.434) !important;
}

.sidenav a:hover {
    color: #f1f1f1;
}

@media screen and (max-width: 798px) {
    .sidenav {
        display: none ;
    }

    .section-margin {
        margin-left: 0px !important;
    }
} 
/* side navigation bar */

#elliman-dropdown {
    margin-bottom: 30px;
    height: 40px;
    font-size: 20px;
    width: 100%;
    max-width: 250px;
}
</style>