{% extends "templates/base.html" %}

{% block title %}Certified hardware{% endblock %}

{% block meta_description %}
  Hardware that have been certified for use with Ubuntu.
{% endblock meta_description %}

{% block outer_content %}

  <form class="js-search-results">
    <section class="p-strip--suru-topped">
      <div class="u-fixed-width">
        <a href="/certified">&lsaquo; Certified hardware</a>
      </div>
      <br />
      <div class="u-fixed-width">
        <h1 class="u-sv3">Search Ubuntu certified hardware</h1>
      </div>
      <div class="u-fixed-width">
        <div class="p-search-box">
          <label for="certified-hardware-search" class="u-off-screen">Search Ubuntu certified hardware</label>
          <input class="p-search-box__input"
                 type="text"
                 name="q"
                 value="{{ query or '' }}"
                 placeholder="Search"
                 id="certified-hardware-search" />
          <button type="submit" class="p-search-box__button">
            <i class="p-icon--search">Submit</i>
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col-3">
          <h2 class="p-heading--4">Filter</h2>
        </div>
        <div class="col-4">
          <h2 class="p-heading--4">
            {% if total_results %}
              {% if total_results and total_results > 1 %}
                {{ offset + 1 }}
                &ndash;
                {% if offset + limit > total_results %}
                  {{ total_results }}
                {% else %}
                  {{ offset + limit }}
                {% endif %}
                of
              {% endif %}
              {{ total_results }} result{% if total_results != 1 %}s{% endif %}
            {% endif %}
          </h2>
        </div>
        <div class="col-5 u-align--right">
          {% if total_results > 0 %}
            <p style="display: inline-block; padding-right: 0.5rem;">Results per page</p>
            <select id="page-size-top"
                    class="p-results-per-page"
                    name="limit"
                    aria-label="Results per page"
                    style="max-width: 5.3rem;
                           min-width: 5.3rem"
                    data-limit="{{ limit }}">
              <option value="20"{% if limit == 20 %}selected{% endif %}>20</option>
              {% if total_results > 20 %}
                <option value="40"{% if limit == 40 %}selected{% endif %}>40</option>
              {% endif %}
              {% if total_results > 40 %}
                <option value="60"{% if limit == 60 %}selected{% endif %}>60</option>
              {% endif %}
              <option value="{{ total_results }}"
                      {% if limit == total_results %}selected{% endif %}>All</option>
            </select>
          {% endif %}
        </div>
      </div>
      <div class="row">
        <div class="col-3 p-side-navigation" id="drawer">
          <a href="#drawer"
             class="p-side-navigation__toggle"
             aria-controls="drawer">Toggle filters</a>
          <div class="p-side-navigation__overlay" aria-controls="drawer"></div>
          <nav class="p-side-navigation__drawer"
               aria-label="Example side navigation">
            <div class="p-side-navigation__drawer-header">
              <a href="#"
                 class="p-side-navigation__toggle--in-drawer"
                 aria-controls="drawer"
                 id="toggle-filters">Toggle filters</a>
            </div>
            <div>
              <aside class="p-accordion" data-multiple-expanded="true">
                <ul class="p-accordion__list">
                  <li class="p-accordion__group--certified">
                    <div role="heading" aria-level="2">
                      <button type="button"
                              class="p-accordion__tab u-no-padding--right"
                              id="tab1"
                              aria-controls="tab1-section"
                              aria-expanded="true">
                        <span>Category</span>
                        <div class="p-round-chip u-hide">
                          <span class="p-chip__value" id="category-count"></span>
                        </div>
                      </button>
                    </div>
                    <hr class="p-rule--muted" />
                    {% include "/certified/shared/_category-filters.html" %}
                  </li>
                  <li class="p-accordion__group--certified" id="vendor-section">
                    <div role="heading" aria-level="2">
                      <button type="button"
                              class="p-accordion__tab u-no-padding--right"
                              id="tab2"
                              aria-controls="tab2-section"
                              aria-expanded="true">
                        Vendor
                        <div class="p-round-chip u-hide">
                          <span class="p-chip__value" id="vendor-count">1</span>
                        </div>
                      </button>
                    </div>
                    <hr class="p-rule--muted" />
                    <section class="p-accordion__panel is-dense"
                             id="tab2-section"
                             aria-hidden="false"
                             aria-labelledby="tab2">
                    </section>
                    <p class="p-reveal-vendors is-dense">
                      <button type="button"
                              class="p-button--link js-show-all-vendors"
                              name="vendor"
                              onclick="toggleExpandFilters(event, this)"
                              value="true">Show all vendors</button>
                    </p>
                    <p class="p-reveal-vendors is-dense">
                      <button type="button"
                              class="p-button--link js-show-less-vendors u-hide"
                              name="vendor"
                              onclick="toggleExpandFilters(event, this)"
                              value="false">Show fewer</button>
                    </p>
                </li>
                <li class="p-accordion__group--certified" id="version-section">
                  <div role="heading" aria-level="2">
                    <button type="button"
                            class="p-accordion__tab u-no-padding--right"
                            id="tab3"
                            aria-controls="tab3-section"
                            aria-expanded="true">
                      Certified Ubuntu
                      <div class="p-round-chip u-hide">
                        <span class="p-chip__value" id="release-count">1</span>
                      </div>
                      release
                    </button>
                  </div>
                  <hr class="p-rule--muted" />
                  <section class="p-accordion__panel is-dense"
                           id="tab3-section"
                           aria-hidden="false"
                           aria-labelledby="tab3">
                  </section>
                  <p class="p-reveal-versions is-dense">
                    <button class="p-button--link js-show-all-releases"
                            name="release"
                            onclick="toggleExpandFilters(event, this)"
                            value="true"
                            name="release">Show all versions</button>
                  </p>
                  <p class="p-reveal-versions is-dense">
                    <button class="p-button--link js-show-less-releases u-hide"
                            name="release"
                            onclick="toggleExpandFilters(event, this)"
                            value="false"
                            name="release">Show fewer</button>
                  </p>
                </li>
              </ul>
              <hr style="margin-bottom: 1rem;" />
            </aside>
            <div class="u-align--right" style="padding-right: 0.5rem">
              <button class="p-button p-update-results u-no-margin--right"
                      onclick="return clearFilters()">Clear</button>
              <button class="p-button--positive p-update-results"
                      onclick="return submitFilters()">Apply</button>
            </div>
          </div>
        </nav>
      </div>
      {% if total_results > 0 %}
        <div class="col-9">
          <table class="p-certification-results">
            <thead>
              <tr>
                <th>Vendor</th>
                <th>Model</th>
                <th>Category</th>
              </tr>
            </thead>
            <tbody>
              {% for result in results %}
                <tr>
                  <td>
                    <a href="/certified/vendors/{{ result.make }}">{{ result.make }}</a>
                  </td>
                  <td>
                    <a href="/certified/{{ result.canonical_id }}">{{ result.model }}</a>
                  </td>
                  <td>{{ result.category }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
          <div class="row">
            <div class="col-5">
              {% with total_results=total_results, total_pages=total_pages, offset=offset, limit=limit, align="u-align--left" %}
                {% if offset >= total_results %}
                    {% set current_page = 1 %}
                  {% else %}
                    {% set current_page = ((offset / limit) + 1) | int %}
                  {% endif %}
                {% if total_results > limit %}
                  {% include "shared/_pagination.html" %}
                {% endif %}
              {% endwith %}
            </div>
            <div class="col-4 u-align--right">
              {% if total_results > 0 %}
                <p style="display: inline-block; padding-right: 0.5rem;">Results per page</p>
                <select id="page-size-bottom"
                        class="p-results-per-page"
                        aria-label="Results per page"
                        style="max-width: 5.3rem;
                               min-width: 5.3rem"
                        data-limit="{{ limit }}">
                  <option value="20" {% if limit == 20 %}selected{% endif %}>20</option>
                  {% if total_results > 20 %}
                    <option value="40" {% if limit == 40 %}selected{% endif %}>40</option>
                  {% elif total_results > 40 %}
                    <option value="60" {% if limit == 60 %}selected{% endif %}>60</option>
                  {% endif %}
                  <option value="{{ total_results }}"
                          {% if limit == total_results %}selected{% endif %}>All</option>
                </select>
              {% endif %}
            </div>
          </div>
        </div>
      {% else %}
        <div class="col-9">
          <h3 class="p-heading--4">No results - 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 u-sv1">Adding alternative words or phrases</li>
            <li class="p-list__item is-ticked  u-sv1">Using individual words instead of phrases</li>
            <li class="p-list__item is-ticked">Trying a different spelling</li>
          </ul>
        </div>
      {% endif %}
    </div>
  </section>
</form>

<script src="{{ versioned_static('js/src/certified-search-results.js') }}"
        defer></script>
{% endblock %}