Add error summary to whitelist page

> If both sections of the page have errors and the page is submitted,
> focus moves to the mobile numbers section so screen reader users may
> not be aware of preceding errors - focus should move to a dedicated
> error summary at the top of the page.

This commit adds the dedicate error summary at the top of the page,
following the GOV.UK Elements style from:
http://govuk-elements.herokuapp.com/errors/

app/templates/views/api/whitelist.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/banner.html" import banner_wrapper %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
 {% from "components/page-footer.html" import page_footer %}
@@ -10,9 +11,30 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
-    Whitelist
-  </h1>
+  {% if form.email_addresses.errors or form.phone_numbers.errors %}
+    {% call banner_wrapper(type='dangerous') %}
+      <h1 class='banner-title'>
+        There was a problem with your whitelist
+      </h1>
+      <p>Fix these errors:</p>
+      <ul>
+        {% if form.email_addresses.errors %}
+          <li>
+            <a href="#{{ form.email_addresses.name }}">Enter valid email addresses</a>
+          </li>
+        {% endif %}
+        {% if form.phone_numbers.errors %}
+          <li>
+            <a href="#{{ form.phone_numbers.name }}">Enter valid phone numbers</a>
+          </li>
+        {% endif %}
+      </ul>
+    {% endcall %}
+  {% else %}
+    <h1 class="heading-large">
+      Whitelist
+    </h1>
+  {% endif %}
 
   <p>
     You and members of