{% extends "base.html" %}

{% block pageid %}home{% endblock %}

{% block extrahead %}
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/demos.css?build={{ BUILD_ID_JS }}"/>
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/new-homepage.css?build={{ BUILD_ID_JS }}"/>
    <meta name="google-site-verification" content="Phj8dHc2oKwic3FGPsKIhdOBk_1wnCTnKwjcjiLgJPc" />
    <meta name="google-site-verification" content="TH9rA27HbfjO_XqYWTIPrW1E7E7Dtgsh7ULzHi3UTVA" />

    {% if waffle.flag('redesign') %}
      {{ css('redesign-home') }}
    {% endif %}
{% endblock %}
{% if not scripts %}
  {% set scripts = ('mdn_home',) %}
{% endif %}

{% block content %}

{% if waffle.flag('redesign') %}

<!-- top search area -->
<div class="home-masthead"><div class="center">

  <h1>{{ _('Shared knowledge <span>for the Open Web</span>') }}</h1>

  <div class="home-search-form">
    <form action="{{ url('search') }}" method="get">
      <input type="search" name="q" placeholder="{{ _('Search the docs') }}" />
    </form>
  </div> 

  <div class="home-features">
    <div class="column-container">
      <div class="column-home-features">
        <h3><i class="icon-file-text-alt"></i><span>{{ _('Web<br />Platform') }}</span></h3>
        <ul>
          <li><a href="{{ devmo_url('Web/Reference/API') }}">{{ _('Web APIs &amp; DOM') }}</a></li>
          <li><a href="{{ devmo_url('Web/HTML') }}">{{ _('HTML') }}</a></li>
          <li><a href="{{ devmo_url('Web/CSS') }}">{{ _('CSS') }}</a></li>
          <li><a href="{{ devmo_url('Web/JavaScript') }}">{{ _('JavaScript') }}</a></li>
          <li><a href="{{ devmo_url('Web') }}">{{ _('more...') }}</a></li>
        </ul>
      </div>
      <div class="column-home-features">
        <h3 class="zones"><i class="icon-suitcase"></i><span>{{ _('Zones') }}</span></h3>
        <ul>
        <li><a href="{{ devmo_url('Web/Apps') }}">{{ _('App Center') }}</a></li>
        <li><a href="{{ devmo_url('Mozilla/Firefox_OS') }}">{{ _('Firefox OS') }}</a></li>
        <li><a href="{{ devmo_url('Mozilla/Persona') }}">{{ _('Persona') }}</a></li>
        </ul>
      </div>
      <div class="column-home-features">
        <h3><i class="icon-wrench"></i><span>{{ _('Developer<br />Tools') }}</span></h3>
        <ul>
        <li><a href="{{ devmo_url('Tools/Firefox_OS_Simulator') }}">{{ _('Firefox OS Simulator') }}</a></li>
        <li><a href="{{ devmo_url('Tools/Page_Inspector') }}">{{ _('Page Inspector') }}</a></li>
        <li><a href="{{ devmo_url('Tools/Debugger') }}">{{ _('JavaScript Debugger') }}</a></li>
        <li><a href="{{ devmo_url('Tools/Web_Console') }}">{{ _('Web Console') }}</a></li>
        <li><a href="{{ devmo_url('Tools') }}">{{ _('more...') }}</a></li>
        </ul>
      </div>
      <div class="column-home-features">
        {# <h3><i class="icon-certificate"></i><span>{{ _('Developer<br />Program') }}</span></h3> #}
        <h3><i class="icon-beaker"></i><span>{{ _('MDN<br />Beta') }}</span></h3>
        <ul>
        <li>{{ _('Welcome to the MDN Beta. ') }}</li>
        <li><a href="
https://wiki.mozilla.org/MDN/Development/Redesign/Testing">{{ _('Learn how you can help!') }}</a></li>
        </ul>
      </div>
    </div>
  </div>

</div></div>

<!-- callout area -->
<div class="home-callouts"><div class="column-container center">
  <div class="column-callout callout-apps">
    <a href="{{ devmo_url('Web/Apps') }}"><span>{{ _('Create<br />Web Apps') }}</span><i></i></a>
  </div>
  <div class="column-callout callout-android">
    <a href="{{ devmo_url('Mozilla/Firefox_for_Android') }}"><span>{{ _('Develop<br />Firefox for Android') }}</span><i></i></a>
  </div>
  <div class="column-callout callout-firefoxos">
    <a href="/en-US/docs/Mozilla/Firefox_OS"><span>{{ _('Build<br />Firefox OS') }}</span><i></i></a>
  </div>
</div></div>

<!-- hacks area -->
<div class="home-hacks"><div class="column-container center">
  <div class="column-hacks">
    <h2><i class="icon-star"></i> {{ _('Hacks Blog <a href="http://hacks.mozilla.org">read more at hacks.mozilla.org <i class="icon-arrow-right"></i></a>') }}</h2>
    {{ newsfeed(updates, section_headers=True) }}
  </div>
  <div class="column-involved">
    <div class="home-involved-card"><a href="{{ devmo_url('Project:MDN/Contributing') }}">
      <h3 class="title">{{ _('Get Involved') }}</h3>

      <p class="numbers">{{ _('<span class="row1">Join <span class="number">3,414</span> contributors</span> <span class="row2">in <span class="number">31</span> languages and locales</span> <span class="row3">around the world.</span>') }}</p>
      <p><span class="button">{{ _('Help improve MDN') }}</span></p>
    </a></div>
  </div>
</div></div>

<!-- demos and dev derby -->
{% if demos %}
<div class="home-demos"><div class="center">

{% if not waffle.flag('derby_closed') %}
  <div class="preview">
    <span>{{ _('Next Dev Derby: <strong>July 2013</strong>') }}</span>
    <span>{{ _('Subject: <strong>File API</strong>') }}</span>
  </div>
{% endif %}

<h2><i class="icon-magic blue"></i> {{ _('See & submit demos') }} 
  {% if not waffle.flag('derby_closed') %}
    <a href="{{ url('demos_devderby_landing') }}">{{ _('MDN Dev Derby <i class="icon-arrow-right"></i>') }}</a>
  {% else %}
    <a href="{{ url('demos') }}">{{ _('MDN Demo Studio <i class="icon-arrow-right"></i>') }}</a>
  {% endif %}
</h2>
<ul>
  {% set extra_class = cycler(' row-first', '')%}
  {% for submission in demos %}
      {{ submission_thumb(submission, extra_class, thumb_width="180", thumb_height="133", is_homepage=True) }}
  {% endfor %}
  </ul>
</div></div>
{% endif %}

<!-- contributions section -->
<div class="home-contribute"><div class="center">
  <h2><i class="icon-smile"></i> {{ _('Help improve MDN') }}</h2>

  <div class="column-container">
    <div class="column-half">
      <p>{{ _('All parts of MDN (docs, demos, and the site itself) are created by an open community of developers. Please join us! Pick one of these ways to help:') }}</p>
    </div>
    <div class="column-half">
      <div class="column-container">
        <div class="column-half">
          <ul>
          <li><a href="{{ devmo_url('needs-review/editorial') }}">{{ _('Editorial review') }}</a></li>
                <li><a href="{{ devmo_url('needs-review/technical') }}">{{ _('Technical review') }}</a></li>
                <li><a href="{{ devmo_url('Project:Getting_started') }}#Create_a_new_page">{{ _('Creating new docs') }}</a></li>
          </ul>
        </div>
        <div class="column-half">
          <ul>
          <li><a href="{{ devmo_url('Project:Localization_Projects') }}">{{ _('Translating (L10N)') }}</a></li>
                <li><a href="{{ url('promote') }}">{{ _('Promoting MDN') }}</a></li>
                <li><a href="https://github.com/mozilla/kuma#readme">{{ _('Contributing to the MDN codebase') }}</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>


  {# Putting off for after launch 
  <div class="column-container home-contribute-recent">
    <div class="column-half">
      <h3>{{ _('Recent Edits') }}</h3>
      <ul>
        <li><a href="">Building the web for beginners</a> <span class="author">by <a href="">David Walsh</a> on August 2, 2013</span></li>
        <li><a href="">Building the web for beginners</a> <span class="author">by <a href="">David Walsh</a> on August 2, 2013</span></li>
        <li><a href="">Building the web for beginners</a> <span class="author">by <a href="">David Walsh</a> on August 2, 2013</span></li>
      </ul>
    </div>
    <div class="column-half">
      <h3>{{ _('Recent Discussions') }}</h3>
      <ul>
        <li><a href="">Building the web for beginners</a> <span class="author">by <a href="">David Walsh</a> on August 2, 2013</span></li>
        <li><a href="">Building the web for beginners</a> <span class="author">by <a href="">David Walsh</a> on August 2, 2013</span></li>
        <li><a href="">Building the web for beginners</a> <span class="author">by <a href="">David Walsh</a> on August 2, 2013</span></li>
      </ul>
    </div>
  </div>
  </div>
</div></div>
#}

{% else %}
<section id="content" class="new-home">
<div class="wrap">

  <section id="content-main" role="main" class="full">

      <div class="home-left">
        <!-- search -->
        <section class="home-search outline-block">
          <form action="search">
            <input type="text" name="q" value="" placeholder="{{ _('Search MDN') }}" />
          </form>
        </section>

        <!-- popular docs block -->
        <section class="home-popular outline-block">
          <h2>{{ _('The Docs <span>Popular Topics</span>') }}</h2>
          <ul>
            <li class="home-popular-docs">
              <h3>{{ _('Web Basics') }}</h3>
              <ul>
                <li><a href="{{ devmo_url('Web/HTML') }}">{{ _('HTML') }}</a></li>
                <li><a href="{{ devmo_url('Web/CSS') }}">{{ _('CSS') }}</a></li>
                <li><a href="{{ devmo_url('Web/JavaScript') }}">{{ _('JavaScript') }}</a></li>
                <li><a href="{{ devmo_url('Web/API') }}">{{ _('APIs / DOM') }}</a></li>
                <li><a href="{{ devmo_url('Web/Guide/Graphics') }}">{{ _('Graphics') }}</a></li>
                <li><a href="{{ devmo_url('Web/MathML') }}">{{ _('MathML') }}</a></li>
                <li>&nbsp;</li>
                <li><a href="{{ url('docs') }}">{{ _('Browse All Docs') }}</a></li>
              </ul>
            </li>
            <li class="home-popular-mozilla">
              <h3>{{ _('In Depth') }}</h3>
              <ul>
                <li><a href="{{ devmo_url('Web/Tutorials') }}">{{ _('Tutorials') }}</a></li>
                <li><a href="{{ devmo_url('Web/Reference') }}">{{ _('References') }}</a></li>
                <li><a href="{{ devmo_url('Web/Guide') }}">{{ _('Developer Guides') }}</a></li>
                <li>&nbsp;</li>
                <li><a href="{{ devmo_url('Accessibility') }}">{{ _('Accessibility') }}</a></li>
                <li><a href="{{ devmo_url('tools') }}">{{ _('Developer Tools') }}</a></li>
                <li><a href="{{ devmo_url('Web/Apps') }}">{{ _('Apps') }}</a></li>
                <li><a href="{{ url('demos') }}">{{ _('Demos') }}</a></li>
              </ul>
            </li>
            <li class="home-popular-features">
              <h3>{{ _('Mozilla For Developers') }}</h3>
              <ul>
                <li><a href="{{ devmo_url('Mozilla/Firefox') }}">{{ _('Firefox for Developers') }}</a></li>
                <li><a href="{{ devmo_url('Mozilla/Mobile') }}">{{ _('Firefox for Android') }}</a></li>
                <li><a href="{{ devmo_url('Mozilla/Firefox_OS') }}">{{ _('Firefox OS') }}</a></li>
                <li><a href="https://marketplace.firefox.com/developers/">{{ _('Firefox OS Marketplace') }}</a></li>
                <li><a href="{{ devmo_url('Mozilla/Add-ons') }}">{{ _('Add-ons') }}</a></li>
                <li><a href="{{ devmo_url('Mozilla/Persona') }}">{{ _('Persona') }}</a></li>
              </ul>

            </li>
          </ul>
        </section>

        <!-- community -->
        <section class="home-community outline-block">
          <h2>{{ _('Get Involved <span>MDN Community</span>') }}</h2>
          <p>{{ _('All parts of MDN (docs, demos, and the site itself) are created by an open community of developers. Please join us! Pick one of these ways to help:') }}</p>

          <ul class="home-community-list">
            <li>
              <ul>
                <li><a href="{{ devmo_url('needs-review/editorial') }}">{{ _('Editorial review') }}</a></li>
                <li><a href="{{ devmo_url('needs-review/technical') }}">{{ _('Technical review') }}</a></li>
                <li><a href="{{ devmo_url('Project:Getting_started') }}#Create_a_new_page">{{ _('Creating new docs') }}</a></li>
                <li>
                  {% trans demo_url=url('demos_submit'),samples_url=devmo_url('tag/NeedsExample') %}
                  <a href="{{ demo_url }}">Demos</a> &amp; <a href="{{ samples_url }}">code samples</a>
                  {% endtrans %}
                </li>
              </ul>
            </li>
            <li>
              <ul>
                <li><a href="{{ devmo_url('Project:Localization_Projects') }}">{{ _('Translating (L10N)') }}</a></li>
                <li><a href="{{ url('promote') }}">{{ _('Promoting MDN') }}</a></li>
                <li><a href="https://github.com/mozilla/kuma#readme">{{ _('Contributing to the MDN codebase') }}</a></li>
              </ul>
            </li>
          </ul>



          <ul class="home-community-conversion">
            <li><a href="{{ devmo_url('Project:MDN/Contributing/Join_the_community') }}">{{ _('Join the Community') }}</a></li>
            <li><a href="{{ devmo_url('Project:MDN/Contributing') }}">{{ _('Contribute to MDN') }}</a></li>
            <li><a href="{{ url('dashboards.revisions') }}">{{ _('See Recent Edits') }}</a></li>
          </ul>
        </section>

        <!-- hacks -->
        <section class="home-hacks outline-block">
          <h2 class="new-heading">{{ _('Hacks Blog <span>hacks.mozilla.org</span>') | safe }}</h2>
          {{ newsfeed(updates, section_headers=True) }}
        </section>
      </div>

      <div class="home-right">

        <section id="home-promos" class="home-promos">
          <div class="promo" id="promo-fosdev">
            <a href="/en-US/docs/Mozilla/Firefox_OS">
              <h2>{{ _('Firefox OS<br>for developers') }}</h2>
              <p>{{ _('Open source mobile OS built with HTML, JavaScript, &amp; WebAPIs') }}</p>
            </a>
            <div></div>
          </div>
          <div class="promo" id="promo-webapps">
            <a href="{{ devmo_url('apps') }}">
              <h2>{{ _('Create<br />Web Apps') | safe}}</h2>
              <p>{{ _('Develop apps using Web standards and open technologies') }}</p>
            </a>
            <div></div>
          </div>
          <div class="promo" id="promo-fosmob">
            <a href="{{ devmo_url('Mozilla/Firefox_for_Android')}}">
              <h2>{{ _('Firefox MOBILE<br />for developers') | safe }}</h2>
              <p>{{ _('How to use device APIs, test sites, & build mobile add-ons') }}</p>
            </a>
            <div></div>
          </div>
        </section>

        {% if demos %}
        <section class="home-demos">
          <h2 class="new-heading">{{ _('Demo Studio') }}</h2>
          <div class="home-demos-conversion">
            <a href="{{ url('demos') }}">{{ _('View All Demos') }}</a> | <a href="{{ url('demos_submit') }}">{{ _('Submit a Demo') }}</a>
          </div>
          <div class="home-demos-featured">
            <strong>{{ _('Featured Demo:') }}</strong><br />
            {{ demos[0].title }}

            <ul class="gallery">
            {% set extra_class = cycler(' row-first', '')%}
            {% for submission in demos %}
                {{ submission_thumb(submission, extra_class, thumb_width="180", thumb_height="133") }}
            {% endfor %}
            </ul>

            {% if not waffle.flag('derby_closed') and current_challenge_tag_name %}
            <strong>{{ _('This month\'s') }} <a href="{{ url('demos_devderby_landing') }}">{{ _('Dev Derby') }}</a>:</strong><br />
            <strong class="derby-topic" style="color:#995C00">{{ tag_meta(current_challenge_tag_name, 'short_title') }}</strong><br />
            <span class="derby-explain">{{ _('Submit your demo to the Derby to win an Android phone or other prizes.') }}</span>
            {% endif %}
          </div>
        </section>
        {% endif %}
      </div>
  </section>
</div>
</section><!-- /#content -->
{% endif %}
{% endblock %}

{% block js %}
{{ super() }}
{% endblock %}