{% extends "org_template.html" %}
{% from "components/table.html" import list_table, row, field, hidden_field_heading %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/live-search.html" import live_search %}
{% from "components/components/button/macro.njk" import usaButton %}

{% block org_page_title %}
  Team members
{% endblock %}

{% block maincolumn_content %}

  {% if user_to_remove %}
    {{ banner(
      'Are you sure you want to remove {}?'.format(user_to_remove.name),
      type='dangerous',
      delete_button='Yes, remove',
      action=url_for('.remove_user_from_organization', org_id=current_org.id, user_id=user_to_remove.id)
    ) }}
  {% endif %}

  <h1 class="font-body-2xl">
    Team members
  </h1>

  {% if show_search_box %}
    <div data-module="autofocus">
      {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
    </div>
  {% endif %}

  <div class="user-list">
    {% for user in users %}
      <div class="user-list-item">
        <div class="grid-row">
          <div class="grid-col-9">
            <h2 class="user-list-item-heading">
              {%- if user.name -%}
                <span class="heading-small">{{ user.name }}</span>&ensp;
              {%- endif -%}
              <span class="hint">
                {%- if user.status == 'pending' -%}
                  {{ user.email_address }} (invited)
                {%- elif user.status == 'cancelled' -%}
                  {{ user.email_address }} (cancelled invite)
                {%- elif user.id == current_user.id -%}
                  (you)
                {% else %}
                  {{ user.email_address }}
                {% endif %}
              </span>
            </h2>
          </div>
          <div class="grid-col-3">
            {% if user.status == 'pending' %}
              <a class="usa-link user-list-edit-link" href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
            {% elif user.status != 'cancelled' %}
              <a class="usa-link usa-link--destructive user-list-edit-link" href="{{ url_for('.edit_organization_user', org_id=current_org.id, user_id=user.id)}}">Remove<span class="usa-sr-only"> {{ user.name }} {{ user.email_address }}</span></a>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="js-stick-at-bottom-when-scrolling">
    {{ usaButton({
      "element": "a",
      "text": "Invite team member",
      "href": url_for('.invite_org_user', org_id=current_org.id),
      "classes": "govuk-button--secondary"
    }) }}
  </div>

{% endblock %}