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

{% set search = request.args.get('release') or request.args.get('details') %}

{% block title %}Security notices{% endblock %}

{% block content %}
  <section class="p-strip--suru-topped">
    <div class="row">
      <div class="col-12">
        {% if search %}
          <h1 class="p-heading--2">Ubuntu Security Notices - Search Results</h1>
        {% else %}
          <h1>Ubuntu Security Notices</h1>
        {% endif %}
      </div>
    </div>
    <div class="row">
      <div class="col-8">
        {% if not search %}
          <p>
            Developers issue an Ubuntu Security Notice when a security issue is fixed in an <a href="https://packages.ubuntu.com">official Ubuntu package</a>.
          </p>
          <p>
            To report a security vulnerability in an Ubuntu package, please <a href="https://wiki.ubuntu.com/SecurityTeam/FAQ#Contact">contact the Security Team</a>.
          </p>

          <p>
            The Security Team also produces <a href="/security/oval">OVAL</a> files for each Ubuntu release. These are an industry-standard machine-readable format dataset that contain details of all known security vulnerabilities and fixes relevant to the Ubuntu release, and can be used to determine whether a particular patch is appropriate. OVAL files can also be used to audit a system to check whether the latest security fixes have been applied.
          </p>
        {% endif %}
      </div>
    </div>
  </section>
  <section class="p-strip--light is-shallow">
    {% if not search %}
      <div class="u-fixed-width">
        <h2>Search</h2>
      </div>
    {% endif %}
    <form action="/security/notices" method="GET" class="p-form js-form">
      <input class="js-order-input" type="hidden" name="order" value="newest" />
      <div class="row u-equal-height">
        <div class="col-4">
          <label class="p-form__label" for="release">Release:</label>
          <select class="p-form__control js-release" name="release" id="release">
            <option value="">Any</option>
            {% for release in releases %}
              <option value="{{ release.codename }}"
                      {% if request.args.get('release') == release.codename %}selected{% endif %}>
                Ubuntu {{ release.version }} {{ release.support_tag }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-8">
          <div class="row">
            <div class="col-6">
              <label class="p-form__label" for="details">Details contain:</label>
              <input class="p-form__control js-details"
                     type="text"
                     name="details"
                     id="details"
                     value="{{ request.args.get('details', '') }}" />
            </div>
            <div class="col-2 u-align--right"
                 style="display: flex;
                        align-items: flex-end">
              <button type="submit"
                      class="p-button--positive js-submit"
                      style="width:100%">
                Search
                {% if search %}again{% endif %}
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </section>
  <section class="p-strip">
    {% if search and notices %}
      <div class="row">
        <div class="col-8">
          <h2 class="p-heading--4">{{ page_first_result }} - {{ page_last_result }} of {{ total_results }} results</h2>
        </div>
        <div class="col-4 p-form p-form--inline">
          <div class="p-form__group">
            <label class="p-form__label" for="sort-by">Sort by:</label>
            <select class="p-form__control u-no-margin--bottom js-order-select"
                    id="sort-by">
              <option value="newest"
                      {% if request.args.order == 'newest' %}selected{% endif %}>Newest</option>
              <option value="oldest"
                      {% if request.args.order == 'oldest' %}selected{% endif %}>Oldest</option>
            </select>
          </div>
        </div>
      </div>
      <div class="u-fixed-width" style="margin-bottom: 2rem; margin-top: 2rem;">
        <hr class="p-rule--muted u-hide--small" />
      </div>
    {% endif %}
    <div class="row">
      <div class="col-9">
        {% if not search %}<h2>Latest Notices</h2>{% endif %}
        {% if notices %}
          {% for notice in notices %}
            {% include "security/_notice-brief.html" %}
          {% endfor %}
        {% else %}
          <h2 class="p-heading--4">No notices found</h2>
        {% endif %}
      </div>
      {% if not search %}
        <div class="col-3 u-hide--small">{% include "security/_subscribe.html" %}</div>
      {% endif %}
    </div>
    {% with total_pages = total_pages, current_page=current_page, offset=offset %}
      {% include "shared/_pagination.html" %}
    {% endwith %}
    {% if not search %}
      <div class="row u-hide--medium u-hide--large">
        <div class="col-12">{% include "security/_subscribe.html" %}</div>
      </div>
    {% endif %}
  </section>
  {% with first_item="_security_discussion", second_item="_security_esm", third_item="_security_further_reading" %}
    {% include "shared/contextual_footers/_contextual_footer.html" %}
  {% endwith %}
  <script>
    var form = document.querySelector(".js-form");
    var orderInput = document.querySelector(".js-order-input");
    var orderSelect = document.querySelector(".js-order-select");
    var details = document.querySelector(".js-details");
    var release = document.querySelector(".js-release");
    var submit = document.querySelector(".js-submit");

    // Submit form on order select change
    if (orderSelect != null) {
      orderSelect.onchange = function(event) {
        orderInput.value = event.target.value;
        form.submit();
      }
    }

    // Disable search when form is empty
    function toogleSearch() {
      submit.disabled = !details.value && !release.value;
    }

    // Toggle on form change
    form.onchange = function() {
      toogleSearch();
    }

    // Toggle on details input keyup
    details.onkeyup = function() {
      toogleSearch();
    }

    // Toggle on page load
    toogleSearch();
  </script>
{% endblock %}