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

<section class="home">
  <header>
    <div class="outer-wrapper">
      <div class="title">
        <hgroup>
          <h1>The Future of Online Education</h1>
          <h2>For anyone, anywhere, anytime</h2>
        </hgroup>

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

          <div class="secondary-actions">
            <div class="social-sharing">
              <div class="sharing-message">Stay up to date with all edX has to offer!</div>
              <a href="https://twitter.com/edXOnline" class="share">
                <img src="${static.url('images/social/twitter-sharing.png')}">
              </a>
              <a href="http://www.facebook.com/EdxOnline" class="share">
                <img src="${static.url('images/social/facebook-sharing.png')}">
              </a>
              <a href="https://plus.google.com/108235383044095082735/posts" class="share">
                <img src="${static.url('images/social/google-plus-sharing.png')}">
              </a>
            </div>
          </div>
        </section>
      </div>

        <a href="#video-modal" class="media" rel="leanModal">
          <div class="hero">
            <div class="play-intro"></div>
          </div>
        </a>

    </div>
  </header>

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

      <section class="university-partners university-partners2x6">
        <ol class="partners">
          <li class="partner mit">
            <a href="${reverse('university_profile', args=['MITx'])}">
              <img src="${static.url('images/university/mit/mit.png')}" />
              <div class="name">
                <span>MITx</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['HarvardX'])}">
              <img src="${static.url('images/university/harvard/harvard.png')}" />
              <div class="name">
                <span>HarvardX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['BerkeleyX'])}">
              <img src="${static.url('images/university/berkeley/berkeley.png')}" />
              <div class="name">
                <span>BerkeleyX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['UTx'])}">
              <img src="${static.url('images/university/ut/ut-rollover_350x150.png')}" />
              <div class="name">
                <span>UTx</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['McGillX'])}">
              <img src="${static.url('images/university/mcgill/mcgill.png')}" />
              <div class="name">
                <span>McGillX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['ANUx'])}">
              <img src="${static.url('images/university/anu/anu.png')}" />
              <div class="name">
                <span>ANUx</span>
              </div>
            </a>
          </li>
        </ol>

        <hr />

        <ol class="partners">
          <li class="partner">
            <a href="${reverse('university_profile', args=['WellesleyX'])}">
              <img src="${static.url('images/university/wellesley/wellesley-rollover_350x150.png')}" />
              <div class="name">
                <span>WellesleyX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['GeorgetownX'])}">
              <img src="${static.url('images/university/georgetown/georgetown-rollover_350x150.png')}" />
              <div class="name">
                <span>GeorgetownX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['TorontoX'])}">
              <img src="${static.url('images/university/toronto/toronto.png')}" />
              <div class="name">
                <span>University of TorontoX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['EPFLx'])}">
              <img src="${static.url('images/university/epfl/epfl.png')}" />
              <div class="name">
                <span>EPFLx</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['DelftX'])}">
              <img src="${static.url('images/university/delft/delft.png')}" />
              <div class="name">
                <span>DelftX</span>
              </div>
            </a>
          </li>
          <li class="partner">
            <a href="${reverse('university_profile', args=['RiceX'])}">
              <img src="${static.url('images/university/rice/rice.png')}" />
              <div class="name">
                <span>RiceX</span>
              </div>
            </a>
          </li>
        </ol>
      </section>

      <section class="courses">
          <ul class="courses-listing">
          %for course in courses:
            <li class="courses-listing-item">
              <%include file="course.html" args="course=course" />
            </li>
          %endfor
          </ul>
      </section>
    </section>
  </section>

  <section class="container">
    <section class="more-info">
      <header>
        <h2><span class="edx">edX</span> News &amp; Announcements</h2>
        <a class="action action-mediakit" href="${reverse('media-kit')}"> <span class="org-name">edX</span> MEDIA KIT</a>
      </header>
      <section class="news">
        <section class="blog-posts">
            %for entry in news:
            <article>
                %if entry.image:
                    <a href="${entry.link}" class="post-graphics" target="_blank"><img src="${entry.image}" /></a>
                %endif
                <div class="post-name">
                    <a href="${entry.link}" target="_blank">${entry.title}</a>
                    %if entry.summary:
                        <p>${entry.summary}</p>
                    %endif
                    <p class="post-date">${strftime("%m/%d/%y", entry.published_parsed)}</p>
                </div>
            </article>
            %endfor
        </section>
        <section class="press-links">
          <h3>edX in the News:</h3>
          <a target="_blank" href="http://www.nytimes.com/2013/04/30/education/adapting-to-blended-courses-and-finding-early-benefits.html?ref=education">The New York Times</a>,
          <a target="_blank" href="http://online.wsj.com/article/SB10001424127887323741004578414861572832182.html?mod=googlenews_wsj">The Wall Street Journal</a>,
          <a target="_blank" href="http://www.washingtonpost.com/local/education/stanford-to-help-build-edx-mooc-platform/2013/04/02/5b53bb3e-9bbe-11e2-9a79-eb5280c81c63_story.html">The Washington Post</a>,
          <a target="_blank" href="http://www.cbsnews.com/video/watch/?id=50143164n">CBS Television</a>,
          <a target="_blank" href="http://bostonglobe.com/2012/12/04/edx/AqnQ808q4IEcaUa8KuZuBO/story.html">The Boston Globe</a>
          <a href="${reverse('press')}" class="read-more">Read More &rarr;</a>
        </section>
      </section>
    </section>
  </section>

</section>

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


<%block name="js_extra">
   <script type="text/javascript"">
      $(window).load(function() {
         if(getParameterByName('next')) {
              $('#login').trigger("click");
         }
      })
   </script>
</%block>

% if show_signup_immediately is not UNDEFINED:
  ## NOTE: This won't work in production, because anonymous views are cached, so it will
  ## show either with or without this extra js for 3 minutes at a time.
<script type="text/javascript">
  $(window).load(function() {$('#signup_action').trigger("click");});
</script>
% endif
