{% extends "withnav_template.html" %}
{% from "components/table.html" import list_table, row, field, boolean_field, hidden_field_heading %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/tick-cross.html" import tick_cross %}

{% set table_options = {
  'field_headings': [
    'Name', 'Send messages', 'Modify service', 'Access API keys', hidden_field_heading('Link to change')
  ],
  'field_headings_visible': True,
  'caption_visible': True
} %}

{% block page_title %}
Manage users – GOV.UK Notify
{% endblock %}

{% block maincolumn_content %}

  <div class="grid-row bottom-gutter">
    <div class="column-two-thirds">
      <h1 class="heading-large">
        Team members
      </h1>
    </div>
    {% if current_user.has_permissions(['manage_users'], admin_override=True) %}
      <div class="column-one-third">
        <a href="{{ url_for('.invite_user', service_id=current_service.id) }}" class="button align-with-heading">Invite team member</a>
      </div>
    {% endif %}
  </div>

  <h2 class="visually-hidden">
    Active
  </h2>
  <div class="user-list">
    {% for user in users %}
      <div class="user-list-item">
        <h3>
          {{ user.name }}&ensp;<span class="hint">
            {%- if user.email_address == current_user.email_address -%}
              (you)
            {% else %}
              {{ user.email_address }}
            {% endif %}
          </span>
        </h3>
        <ul class="tick-cross-list">
          <div class="tick-cross-list-permissions">
            {{ tick_cross(
              user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']),
              'Send messages'
            ) }}
            {{ tick_cross(
              user.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings']),
              'Manage service'
            ) }}
            {{ tick_cross(
              user.has_permissions(permissions=['manage_api_keys']),
              'Access API keys'
            ) }}
          </div>
          {% if current_user.has_permissions(['manage_users'], admin_override=True) %}
            {% if current_user.id != user.id %}
              <li class="tick-cross-list-edit-link">
                <a href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Edit permissions</a>
              </li>
            {% endif %}
          {% endif %}
        </ul>
      </div>
    {% endfor %}
  </div>

  {% if invited_users %}
    <h2 class="heading-medium">
      Invited
    </h2>
    <div class="user-list">
      {% for user in invited_users %}
        <div class="user-list-item">
          <h3>
            {{ user.email_address }}
          </h3>
          <ul class="tick-cross-list">
            <div class="tick-cross-list-permissions">
              {{ tick_cross(
                user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']),
                'Send messages'
              ) }}
              {{ tick_cross(
                user.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings']),
                'Manage service'
              ) }}
              {{ tick_cross(
                user.has_permissions(permissions=['manage_api_keys']),
                'Access API keys'
              ) }}
            </div>
            <li class="tick-cross-list-edit-link">
              {% if user.status == 'pending' and current_user.has_permissions(['manage_users']) %}
                <a href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation</a>
              {% else %}
                {{ user.status|title }}
              {% endif %}
            </li>
          </ul>
        </div>
      {% endfor %}
    </div>
  {% endif %}

{% endblock %}