  <header id="demos-head">
    <h1><a href="{{ url('demos') }}">{{_("Mozilla Demo Studio")}}</a></h1>
    <ul class="demo-buttons">
      <li class="submit"><a href="{{ url('demos_submit') }}" class="button"><b></b>{{_("Submit a Demo")}}</a></li>
      <li class="learnmore menu"><a href="#learn-pop" class="button">{{ _('Learn More') }}</a>
        <div id="learn-pop" aria-hidden="true">        
          {% trans %}
          <p>Welcome to the Mozilla Demo Studio, where developers like you can develop, share, demonstrate, and learn all about Web technologies. See what's possible by exploring Demo Studio:</p>
          <ul>
            <li>View demos that showcase what HTML, CSS, and JavaScript can do.</li>
            <li>Inspect the source code for those demos so you can see how they work.</li>
            <li>Read documentation to learn about the open standards and technologies that power the Web.</li>
          </ul>
          {% endtrans %}
        </div>
      </li>
      <li class="tags menu">
        <a href="#tags-list" class="button" aria-haspopup="true">{{_("Browse by Technology")}}</a>
        <ul id="tags-list" class="menu" aria-hidden="true">
            {% for tag in tags_used_for_submissions() %}
                {% if tag.name.startswith('tech:') %}
                    <li><a href="{{ url('demos_tag', tag=tag.name) }}">{{ tag_title(tag) }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
      </li>
      <li class="search">
        <form class="demo-search" method="GET" action="{{ url('demos_search') }}">
          <p>
          <input type="search" id="search-demos" name="q" 
                placeholder="{{_('Search the Demo Studio')}}" 
                value="{{ request.GET.get('q', '') }}" />
                <noscript><button type="submit">{{_('Search')}}</button></noscript>
          </p>
        </form>
      </li>
    </ul>
  </header>
