<%! from django.core.urlresolvers import reverse %>
<%namespace name='static' file='../static_content.html'/>
<%block name="js_extra">
  <script src="${static.url('js/course_info.js')}"></script>
</%block>

<%inherit file="../main.html" />

<section class="course-info">
  <header class="course-profile">
    <div class="intro-inner-wrapper">
      <section class="intro">
        <hgroup>
        <h1>${course.number}: ${course.get_about_section("title")}</h1><h2><a href="#">${course.get_about_section("university")}</a></h2>
        </hgroup>

        <div class="main-cta">
          <a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
        </div>

      </section>
      <a href="#video-modal" class="media" rel="leanModal">
        <div class="hero">
          <img src="${static.url('images/courses/circuits.jpeg')}" />
          <div class="play-intro"></div>
        </div>
      </a>
    </div>
  </header>

  <section class="container">
    <section class="details">
      <nav>
        <a href="#" class="active">Overview</a>
      ##  <a href="#">FAQ</a>
      ##  <a href="#">Requirements</a>
      ##  <a href="#">Text-book</a>
      ##  <a href="#">Syllabus</a>
      ##  <a href="#">Reviews</a>
      </nav>

      <div class="inner-wrapper">
        ${course.get_about_section("overview")}
      </div>
    </section>

    <section class="course-sidebar">
      <section class="course-summary">
        <header>
          <div class="social-sharing">
            <div class="sharing-message">Share with friends and family!</div>
            <a href="#" class="share">
              <img src="${static.url('images/twitter-sharing.png')}">
            </a>
            <a href="#" class="share">
              <img src="${static.url('images/facebook-sharing.png')}">
            </a>
            <a href="#" class="share">
              <img src="${static.url('images/email-sharing.png')}">
            </a>
          </div>
        </header>

        <ol class="important-dates">
          <li><div class="icon start-icon"></div><p>Classes Start</p><span class="start-date">7/12/12</span></li>
          ##<li><div class="icon final-icon"></div><p>Final Exam</p><span class="final-date">12/09/12</span></li>
          ##<li><div class="icon length-icon"></div><p>Course Length</p><span class="course-length">15 weeks</span></li>
          <li><div class="icon number-icon"></div><p>Course Number</p><span class="course-number">${course.number}</span></li>
        </ol>
      </section>
    </section>

  </section>
</section>

<%include file="../video_modal.html" />
