## mako
<%!
  from django.utils.translation import ugettext as _
%>
<%namespace name='static' file='/static_content.html'/>

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

<%block name="title"><title>${_('About')}</title></%block>

<%block name="js_extra">
  <script type="text/javascript">
    $(function() {
      $('section.message').hide();
      $('#about-menu a').removeClass('active');
      window.scrollTo(0,0);
      var hash = window.location.hash

      if (hash) {
        $('section' + hash).show();
        $('#about-menu a.' + hash.substring(1)).addClass('active');
      } else {
        $('section#about').show();
        $('#about-menu a.about').addClass('active');
      }

      $('#about-menu a').click(function(event) {
        event.preventDefault();
        $('#about-menu a').removeClass('active');
        $(this).addClass('active');
        var clickId = "section" + $(this).attr('href');
        $('section.message').hide();
        $(clickId).show();
      });
    });
  </script>
</%block>

<section class="container about" style="width: auto;">
  <nav id="about-menu">
    <a href="#about" class="about active">${_('About')}</a>
    <a href="#careers" class="careers">${_('Careers')}</a>
    <a href="#contact" class="contact">${_('Contact')}</a>
  </nav>

  <section class="vision">

## About Section ##
    <section class="message left" id="about">
      <div class="photo">
        <!--
            Photo License: CC0 Public Domain (Free for commercial use / No attribution required)
            https://pixabay.com/en/book-books-circle-curly-education-2869/
        -->
        <img src="${static.url('themes/default/images/about.jpg')}" alt="" />
      </div>
      <article>
        <h2>${_('About')}</h2>

        <p>Your about text goes here!</p>

        <p>&nbsp;</p>
      </article>
      <hr class="fade-right-hr-divider">
    </section>

## Careers Section ##
    <section class="message left" id="careers">
      <div class="photo">
        <!--
            Photo License: CC0 Public Domain (Free for commercial use / No attribution required)
            https://pixabay.com/en/man-corporate-businessman-suit-tie-871960/
        -->
        <img src="${static.url('themes/default/images/careers.jpg')}" alt="" />
      </div>
      <article>
        <h2>${_('Careers')}</h2>

        <p>Your job postings go here!</p>

        <p>&nbsp;</p>
      </article>
      <hr class="fade-right-hr-divider">
    </section>

## Contact Section ##
    <section class="message left" id="contact">
      <div class="photo">
        <!--
            Photo License: CC0 Public Domain (Free for commercial use / No attribution required)
            https://pixabay.com/en/network-cobweb-dewdrop-586177/
        -->
        <img src="${static.url('themes/default/images/contact.jpg')}" alt="" />
      </div>
      <article id="stanford-OpenEdX-contact">
        <h2>${_('Contact Us')}</h2>

        <p>Your contact information goes here!</p>

        <p>&nbsp;</p>
      </article>
      <hr class="fade-right-hr-divider">
    </section>
  </section>

</section>
