{% 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/tick-cross.html" import tick_cross %}
{% from "components/textbox.html" import textbox %}
{% from "components/live-search.html" import live_search %}

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

{% block maincolumn_content %}

  <h1 class="heading-medium">
    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">
        <h3>
          {%- 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>
        </h3>
        <ul class="tick-cross-list">
          <li class="tick-cross-list-edit-link">
            {% if user.status == 'pending' %}
              <a href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation</a>
            {% endif %}
          </li>
        </ul>
      </div>
    {% endfor %}
  </div>

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

{% endblock %}
