{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/table.html" import list_table, field, hidden_field_heading %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/list-entry.html" import list_entry %}
{% from "components/form.html" import form_wrapper %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}

{% block service_page_title %}
  Guest list
{% endblock %}

{% block backLink %}
  {{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }}
{% 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 guest list
      </h1>
      <p>Fix these errors:</p>
      <ul>
        {% if form.email_addresses.errors %}
          <li>
            <a class="usa-link usa-link--destructive" href="#{{ form.email_addresses.name }}">Enter valid email addresses</a>
          </li>
        {% endif %}
        {% if form.phone_numbers.errors %}
          <li>
            <a class="usa-link usa-link--destructive" href="#{{ form.phone_numbers.name }}">Enter valid phone numbers</a>
          </li>
        {% endif %}
      </ul>
    {% endcall %}
  {% else %}
    {{ page_header('Guest list') }}
  {% endif %}

  <p>
    You can use a team and guest list key to send real messages to your team and up to 5 other email addresses or phone numbers.
  </p>

  <p>
    You do not need to add yourself or your <a class="usa-link" href="{{ url_for('main.manage_users', service_id=current_service.id) }}">team members</a> to the guest list.
  </p>

  {% call form_wrapper() %}

    <div class="grid-row">
      <div class="grid-col-8">

        {{ 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') }}

  {% endcall %}

{% endblock %}