<%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>

<section class="home">
  <header>
    <div class="outer-wrapper">
      <div class="inner-wrapper">
        <div class="title">
          <h1>Online education for anyone, anywhere, at anytime</h1>

          <div class="main-cta">
            <a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a>
          </div>

          <div class="secondary-actions">
            <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>

            <a href="#video-modal" class="intro-video" rel="leanModal">
              <!--
                 -<img src="${static.url('images/courses/space1.jpg')}" />
                 -->
              <div class="video">
                <div class="play"></div>
              </div>
              <p>Play intro video</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>

  <section class="container">
    <section class="highlighted-courses">
      <h2>Explore courses from <span class="lowercase">edX</span> universities</h2>

      <section class="university-partners">
        <ol class="partners">
          <li class="partner mit">
            <a href="/university_profile">
              <img src="${static.url('images/mit.png')}" />
              <div class="name">
                <span>MITx</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="/university_profile">
              <img src="${static.url('images/harvard.png')}" />
              <div class="name">
                <span>HarvardX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="/university_profile">
              <img src="${static.url('images/berkeley.png')}" />
              <div class="name">
                <span>BerkeleyX</span>
              </div>
            </a>
          </li>
        </ol>
      </section>

      <section class="courses">
        %for course in courses:
          <%include file="course.html" args="course=course" />
        %endfor
      </section>
    </section>
  </section>

  <section class="container">
    <section class="more-info">
      <header>
        <h2>edX News & Announcements</h2>
        <a href="/t/press.html">Read More &rarr;</a>
      </header>
      <section class="news">
        <section class="blog-posts">
          <article>
            <a href="#" class="post-graphics">
              <img src="${static.url('images/mongolia_post.jpeg')}" />
            </a>
            <div class="post-name">
              <a href="">Opening Doors For Exceptional Students: 6.002x in Mongolia.</a>
              <p class="post-date">7/12/2012</p>
            </div>
          </article>

          <article>
            <a href="#" class="post-graphics">
              <img src="${static.url('images/courses/space1.jpg')}" />
            </a>
            <div class="post-name">
              <a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
              <p class="post-date">7/12/2012</p>
            </div>
          </article>

          <article>
            <a href="#" class="post-graphics">
              <img src="${static.url('images/courses/space1.jpg')}" />
            </a>
            <div class="post-name">
              <a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
              <p class="post-date">7/12/2012</p>
            </div>
          </article>
        </section>
      </section>
    </section>
  </section>

</section>

<section id="video-modal" class="modal home-page-video-modal">
  <div class="inner-wrapper">
    <iframe width="640" height="360" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
  </div>
</section>
