{% 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 %}
{% from "components/list-entry.html" import list_entry %}
{% from "components/form.html" import form_wrapper %}

{% block service_page_title %}
  Whitelist
{% endblock %}

{% block maincolumn_content %}

  {% 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
    <a href="{{ url_for('main.manage_users', service_id=current_service.id) }}">your team</a>
    are included in the whitelist automatically.
  </p>

  {% call form_wrapper() %}

    <div class="grid-row">
      <div class="column-two-thirds">

        {{ list_entry(
          form.email_addresses,
          item_name='email address',
          autocomplete=False
        ) }}

        {{ list_entry(
          form.phone_numbers,
          item_name='phone number',
          autocomplete=False
        ) }}

      </div>
    </div>

    {{ page_footer(
      'Save',
      secondary_link=url_for('.api_integration', service_id=current_service.id),
      secondary_link_text='Back to API integration'
    ) }}

  {% endcall %}

{% endblock %}