{% extends "withnav_template.html" %}
{% from "components/tick-cross.html" import tick_cross %}
{% from "components/live-search.html" import live_search %}
{% from "components/components/button/macro.njk" import usaButton %}

{% block service_page_title %}
  Team members
{% endblock %}

{% block serviceNavigation %}{% endblock %}

{% block sideNavigation %}
  {% include "components/settings_nav.html" %}
{% endblock %}

{% block maincolumn_content %}

  <div class="button-flex-header">
    <h1 class="font-body-2xl margin-0">
      Team members
    </h1>
    {% if current_user.has_permissions('manage_service') %}
      {{ usaButton({
      "element": "a",
      "text": "Invite a team member",
      "href": url_for('.invite_user', service_id=current_service.id),
      "classes": "usa-button--outline"
      }) }}
    {% endif %}
  </div>

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

  <div class="user-list">
    <div class="js-live-search-no-results" style="display: none;">
      <p class="usa-body margin-0">No results found</p>
    </div>
    {% for user in users %}
      {% if user.status != 'cancelled' %}
        <div class="user-list-item width-full">
          <h2 class="user-list-item-heading font-body-lg margin-y-0" title="{{ user.email_address }}">
            {%- if user.name -%}
              <span class="heading-small live-search-relevant">{{ user.name }}</span>
            {%- else -%}
              <span class="heading-small live-search-relevant">{{ user.email_address }}</span>
            {%- endif -%}
          </h2>
          <p class="margin-top-0">
            {%- if user.status == 'pending' -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
              <span class="hint">(invited)</span>
            {%- elif user.status == 'expired' -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
              <span class="hint">(expired invite)</span>
            {%- elif user.id == current_user.id -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
              <span class="hint">(you)</span>
            {%- else -%}
              <span class="live-search-relevant">{{ user.email_address }}</span>
            {% endif %}
          </p>

          <div class="usa-accordion usa-accordion--bordered margin-bottom-2">
            <h3 class="margin-bottom-0 usa-accordion__heading">
              <button
                type="button"
                class="usa-accordion__button"
                aria-expanded="false"
                aria-controls="permissions_{{user.id}}"
              >
                Permissions
              </button>
            </h3>
              <div id="permissions_{{user.id}}" class="usa-accordion__content usa-prose" hidden>
                <ul class="tick-cross-list-permissions">
                  {% for permission, label in permissions %}
                    {{ tick_cross(
                      user.has_permission_for_service(current_service.id, permission),
                      label
                    ) }}
                  {% endfor %}
                </ul>
                {% if current_service.all_template_folders %}
                  <p class="usa-body tick-cross-list-hint">
                    {% set folder_count = user.template_folders_for_service(current_service) | length %}
                    {% if folder_count == 0 %}
                      Cannot see any folders
                    {% elif folder_count != current_service.all_template_folders | length %}
                      Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %}
                    {% else %}
                      Can see all folders
                    {% endif %}
                  </p>
                {% endif %}

                {% if current_service.has_permission('email_auth') %}
                  <p class="usa-body tick-cross-list-hint">
                    Signs in with
                    {{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
                  </p>
                {% endif %}
              </div>
          </div>



          {% if current_user.has_permissions('manage_service') %}
            {% if user.status == 'pending' or user.status == 'expired' %}
              <a class="user-list-edit-link usa-link padding-x-2" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id) }}">
                Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span>
              </a>
            {% endif %}

            {% if user.status == 'expired' %}
              <a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id) }}">
                Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span>
              </a>
            {% elif user.is_editable_by(current_user) %}
              <a class="user-list-edit-link usa-link padding-x-2" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id) }}">
                Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span>
              </a>
            {% endif %}
          {% endif %}
        </div>
      {% endif %}
    {% endfor %}
  </div>


{% endblock %}