search.html

{% extends "templates/one-column.html" %}

{% block head_extra %}<meta name="robots" content="noindex" />{% endblock %}

{% block title %}Search results{% if query %} for '{{ query }}'{% endif %}{% endblock %}

{% block content %}

  <div class="p-strip is-shallow">
    <div class="u-fixed-width">
      {% if query %}
        {% if estimatedTotal == 0 %}
          <h1 class="p-heading--2">Sorry we couldn't find "{{ query }}"</h1>
          {% if siteSearch %}<h3>on <a href="https://{{ siteSearch }}">{{ siteSearch }}</a></h3>{% endif %}
        {% else %}
          <h1 class="p-heading--2">Search results for "{{ query }}"</h1>
          {% if siteSearch %}<h3>on <a href="https://{{ siteSearch }}">{{ siteSearch }}</a></h3>{% endif %}
        {% endif %}
      {% else %}
        <h1>Search Ubuntu and Canonical sites</h1>
      {% endif %}
    </div>
  </div>

  {# search form #}
  <div class="u-fixed-width">
    <form class="p-search-box" action="/search">
      <label for="search-input" class="u-off-screen">Search</label>
      <input class="p-search-box__input" name="q" id="search-input" type="search" {% if query %}value="{{ query }}"{% endif %} placeholder="e.g. juju" />
      {% if siteSearch %}
        <input name="siteSearch" type="hidden" value="{{ siteSearch }}" />
      {% endif %}
      <button type="submit" alt="search" class="p-search-box__button" alt="search"><i class="p-icon--search">Submit</i></button>
    </form>
  </div>

  {% if results %}
    {% if results.entries %}
      {% for item in results.entries %}
        <div class="p-strip is-shallow">
          <div class="row">
            <div class="col-12">
              <h5><a href="{{ item.link }}" class="title-main">{{ item.htmlTitle | safe}}</a></h5>
              <p>
                {{ item.htmlSnippet | safe }}
              </p>
              <small><a href="{{ item.link }}">{{ item.htmlFormattedUrl | safe }}</a></small>
            </div>
          </div>
        </div>
      {% endfor %}

      <div class="p-strip">
        <div class="row">
          <div class="col-6 u-align--left">
            {% if results.queries and results.queries.previousPage %}
              <a href="/search?q={{ query }}&amp;start={{ results.queries.previousPage[0].startIndex }}{% if siteSearch %}&amp;siteSearch={{ siteSearch }}{% endif %}">&#8249;&nbsp;Previous</a>
            {% endif %}
          </div>
    
          <div class="col-6 u-align--right">
            {% if results.queries and results.queries.nextPage %}
              <a href="/search?q={{ query }}&amp;start={{ results.queries.nextPage[0].startIndex }}{% if siteSearch %}&amp;siteSearch={{ siteSearch }}{% endif %}">Next&nbsp;&#8250;</a>
            {% endif %}
          </div>
        </div>
      </div>
    {% else %}
      <div class="p-strip">
        <div class="row">
          <div class="col-6">
            <h3>Why not try widening your search?</h3>
            <p>You can do this by:</p>
            <ul class="p-list">
              <li class="p-list__item is-ticked">Adding alternative words or phrases</li>
              <li class="p-list__item is-ticked">Using individual words instead of phrases</li>
              <li class="p-list__item is-ticked">Trying a different spelling</li>
            </ul>
          </div>
          <div class="col-6">
            <h3>Still no luck?</h3>
            <ul class="p-list">
              <li class="p-list__item is-ticked"><a href="/">Visit the Ubuntu homepage</a></li>
              <li class="p-list__item is-ticked"><a href="/desktop/contact-us?product=search-page">Contact us</a></li>
            </ul>
          </div>
        </div>
      </div>
    {% endif %}
  {% endif %}
{% endblock content %}