{% extends "base.html" %}

{% block pageid %}docs{% endblock %}

{% block bodyclass %}section-docs landing{% endblock %}

{% block title %}{{ page_title(_('Doc Center')) }}{% endblock %}

{% block content %}
<section id="content">
<div class="wrap sidebar">
  <section id="content-main" role="main">
    <form id="doc-search" method="get" action="http://www.google.com/search"
          data-url="{{ url('search') }}">
    <div>
      <p>
        <input type="search" id="q-docs" name="q" placeholder="{{ _('Search MDN Documentation') }}">
        <button type="submit">{{ _('Search') }}</button>
      </p>
      <input type="hidden" name="sitesearch" value="developer.mozilla.org" />
    </div>
    <script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
    </form>

    <section class="section-intro boxed">
    
      <header class="head section-web">
        {# L10n: Please escape HTML entities here, like &amp; #}
        <h2>{{ _('Popular Topics for Web Developers')|safe }}</h2>
      </header>
      <ul id="doc-topics">
        <li>
          <h3><a href="{{ devmo_url('Web/HTML') }}">{{ _('HTML') }}</a></h3>
          <p>{{ _('HyperText Markup Language, the core language of the web.') }}</p>
        </li>
        <li>
          <h3><a href="{{ devmo_url('Web/Guide/HTML/HTML5') }}">{{ _('HTML5') }}</a></h3>
          <p>{{ _('The next generation of HTML, HTML5 adds powerful new capabilities for web sites and web applications.') }}</p>
        </li>
        <li>
          <h3><a href="{{ devmo_url('Web/JavaScript') }}">{{ _('JavaScript') }}</a></h3>
          <p>{{ _('The scripting language that powers modern web applications.') }}</p>
        </li>
        <li>
          <h3><a href="{{ devmo_url('Web/CSS') }}">{{ _('CSS') }}</a></h3>
          <p>{{ _('Cascading Style Sheets provide advanced layout and formatting of web content.') }}</p>
        </li>
        <li>
          <h3><a href="{{ devmo_url('DOM') }}">{{ _('DOM') }}</a></h3>
          <p>{{ _('The Document Object Model describes the structure and content of web pages.') }}</p>
        </li>
        <li>
          <h3><a href="{{ devmo_url('AJAX') }}">{{ _('AJAX') }}</a></h3>
          <p>{{ _('"Asynchronous JavaScript and XML" is a term that describes the use of all these technologies together to create powerful web applications.') }}</p>
        </li>
      </ul>

      <header class="subhead">
        {# L10n: Please escape HTML entities here, like &amp; #}
        <h2>{{ _('Key Topics for Web Developers')|safe }}</h2>
        <p>{{ _('A comprehensive list of terms to help Web developers find the documentation they need.') }}</p>
      </header>
      {% include "docs/glossary.html" %}

    </section>{# /.section-intro #}

    <section id="other-sections">
      <header>
      <h3>
        {% trans mobile_link='<a href="{0}" class="mobile">{1}</a>'|f(url('mobile'), _('Mobile'))|safe,
                 addons_link='<a href="{0}" class="addons">{1}</a>'|f(url('addons'), _('Add-ons'))|safe,
                 apps_link='<a href="{0}" class="mozilla">{1}</a>'|f(url('mozilla'), _('Mozilla'))|safe %}
        Get involved in the {{ mobile_link }}, {{ addons_link }}, & {{ apps_link }} Developer Communities:
        {% endtrans %}
      </h3>
      </header>
      <div class="boxed">
        <div class="section">
          <h4><a href="{{ url('mobile') }}" class="mobile">{{ _('Mobile') }}</a></h4>
          <ul>
            <li><a href="{{ devmo_url('Mobile') }}">{{ _('Firefox Mobile for developers') }}</a></li>
            <li><a href="{{ devmo_url('Detecting_device_orientation') }}">{{ _('Detecting device orientation') }}</a></li>
            <li><a href="{{ devmo_url('Using_geolocation') }}">{{ _('Using geolocation') }}</a></li>
          </ul>
        </div>
        <div class="section">
          <h4><a href="{{ url('addons') }}" class="addons">{{ _('Add-ons') }}</a></h4>
          <ul>
            <li><a href="https://addons.mozilla.org/en-US/developers/">{{ _('AMO Developer Hub') }}</a></li>
            <li><a href="{{ devmo_url('Extensions') }}">{{ _('Extensions') }}</a></li>
            <li><a href="{{ devmo_url('Plugins') }}">{{ _('Plugins') }}</a></li>
            <li><a href="https://builder.mozillalabs.com/">{{ _('Add-ons Builder') }}</a></li>
            <li><a href="{{ devmo_url('Themes') }}">{{ _('Themes') }}</a></li>
            <li><a href="{{ devmo_url('Creating_OpenSearch_plugins_for_Firefox') }}">{{ _('Search engine plugins') }}</a></li>
          </ul>
        </div>
        <div class="section">
          <h4><a href="{{ url('mozilla') }}" class="mozilla">{{ _('Mozilla') }}</a></h4>
          <ul>
            <li><a href="{{ devmo_url('Participating_in_the_Mozilla_project') }}">{{ _('Participating in the Mozilla project') }}</a></li>
            <li><a href="{{ devmo_url('Using_Mozilla_code_in_other_projects') }}">{{ _('Using Mozilla code in other projects') }}</a></li>
            <li><a href="{{ devmo_url('Localization') }}">{{ _('Localization') }}</a></li>
            <li><a href="{{ devmo_url('QA') }}">{{ _('Quality Assurance') }}</a></li>
          </ul>
        </div>
      </div>
    </section>
  </section>{# /#content-main #}

  <aside id="content-sub" role="complementary">

    {% if active_docs %}
    <div class="module hot" id="most-active">
      <h3 class="mod-title">{{ _('Most Active Docs') }}</h3>
      <ul class="hfeed">
        {% for doc in active_docs %}
        <li class="hentry">
          <h4 class="entry-title"><a href="{{ doc['link'] }}">{{ doc['title']|entity_decode }}</a></h4>
          <p class="entry-meta">{{ _('Last edited by:') }} <cite class="author vcard">{{ doc['author']|entity_decode }}</cite></p>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    <div class="module hot" id="most-active">
      <h3 class="mod-title">{{ _('Content Management') }}</h3>
      <ul class="hfeed">
        <li class="hentry">
          <h4 class="entry-title"><a href="{{ url('wiki.new_document') }}">{{ _('Create a New Document') }}</a></h4>
        </li>
        <li class="hentry">
          <h4 class="entry-title"><a href="{{ url('wiki.new_document') }}?slug=Template:">{{ _('Create a New Template') }}</a></h4>
        </li>

        <li class="hentry">
          <h4 class="entry-title"><a href="{{ url('wiki.all_documents') }}">{{ _('List Documents') }}</a></h4>
        </li>
        <li class="hentry">
          <h4 class="entry-title"><a href="{{ url('wiki.list_templates') }}">{{ _('List Templates') }}</a></h4>
        </li>
        <li class="hentry">
          <h4 class="entry-title"><a href="{{ url('dashboards.revisions') }}">{{ _('Revisions Dashboard') }}</a></h4>
        </li>
      </ul>
    </div>

    {% set review_flags = (
        ('technical', _('Needs Technical Review')),
        ('editorial', _('Needs Editorial Review')),
    ) %}
    {% for tag, title in review_flags %}
        {% if tag in review_flag_docs and review_flag_docs[tag] | length > 0 %}
        <div class="module hot" id="review-{{ tag }}">
          <h3 class="mod-title">{{ title }}</h3>
          <ul class="hfeed">
            {% for doc in review_flag_docs[tag] %}
            <li class="hentry">
              <h4 class="entry-title"><a href="{{ doc.get_absolute_url() }}">{{ doc.title }}</a></h4>
              <p class="entry-meta">{{ _('Last edited by:') }} <a href="{{ url('devmo.views.profile_view', username=doc.current_revision.creator.username) }}" class="author vcard">{{ doc.current_revision.creator }}</a></p>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
    {% endfor %}

    {% if dotd %}
    <div class="module hfeed" id="doc-of-the-day">
      <h3 class="mod-title">{{ _('Doc Of The Day') }}</h3>
      <div class="hentry">
        <h4 class="entry-title"><a href="{{ dotd['uri'] }}">{{ dotd['title']|entity_decode }}</a></h4>
        <p class="entry-summary">{{ dotd['content']|entity_decode|truncatewords(30) }}</p>
        <p class="entry-meta">
        {% trans author='<cite class="author vcard">{0}</cite>'|f(dotd['last_author'])|safe,
                 updated='<abbr class="updated" title="{0}">{1}</abbr>'|f(
                   dotd['last_edit'], dotd['last_edit']|datetime)|safe %}
        Modified by {{ author }} on {{ updated }}
        {% endtrans %}
        </p>
      </div>
    </div>
    {% endif %}

  </aside>{# /#content-sub #}

</div>
</section>{# /#content #}

{% endblock %}