{% extends "sentry/bases/organization.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
{% load sentry_helpers %}

{% block title %}{% trans "Members" %} | {{ block.super }}{% endblock %}

{% block org_members_nav %}active{% endblock %}

{% block main %}
  {% if can_add_members %}
    <a class="btn btn-primary btn-sm pull-right" href="{% url 'sentry-create-organization-member' organization.slug %}">
      <span class="icon-plus"></span> {% trans "Invite Member" %}
    </a>
  {% else %}
    <a class="btn btn-primary btn-sm btn-disabled tip pull-right"
       title="{% trans "You do not have enough permission to add new members" %}">
      <span class="icon-plus"></span> {% trans "Invite Member" %}
    </a>
  {% endif %}

  <h3>{% trans "Members" %}</h3>

  {% if request_list %}
  <table class="table" style="margin-bottom: 20px" id="access_request_list">
    <thead>
      <tr>
        <th colspan="2">{% trans "Pending Access Requests" %}</th>
      </tr>
    </thead>
    <tbody>
    {% for access_request in request_list %}
      <tr>
        <td>
          <strong>{{ access_request.member.user.get_display_name }}</strong> requests access to the <strong>{{ access_request.team.name }}</strong> team.
        </td>
        <td class="align-right">
          <a href="#" class="btn btn-primary btn-sm"
                 data-action="approve" data-id="{{ access_request.id }}">Approve</a>
          <a href="#" class="btn btn-default btn-sm"
                 data-action="deny" data-id="{{ access_request.id }}">Deny</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  {% elif ref == 'access-requests' %}
    <div class="well">
      <p>{% trans "All pending access requests have been taken care of." %}</p>
    </div>
  {% endif %}

  <table class="table member-list">
    <colgroup>
      <col width="30%"/>
      <col width="25%" />
      <col width="20%"/>
      <col width="20%"/>
      <col width="5%"/>
    </colgroup>
    <thead>
      <tr>
        <th>{% trans "Member" %}</th>
        <th>&nbsp;</th>
        <th>{% trans "Role" %}</th>
        {% if can_remove_members or member_can_leave %}
          <th class="squash">&nbsp;</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% for member, needs_sso in member_list %}
        <tr>
          <td class="table-user-info">
            <span class="avatar">
              {% letter_avatar_svg member.get_display_name member.get_label %}
              {% if member.get_avatar_type == 'upload' %}
                <img src="{% profile_photo_url member.user_id size 80 %}">
              {% elif member.get_avatar_type == 'gravatar' %}
                <img src="{% gravatar_url member.get_email size 80 default 'blank' %}">
              {% endif %}
            </span>
            <h5><a href="{% url 'sentry-organization-member-settings' organization.slug member.id %}">
              {{ member.get_display_name }}
            </a></h5>
            {{ member.get_email }}
            <br />
          </td>
          <td class="status">
            {% if needs_sso or member.is_pending %}
              {% if member.is_pending %}
                <strong>Invited</strong>
              {% else %}
                <strong>Missing SSO Link</strong>
              {% endif %}
              <br>
              {% if can_add_members %}
              <a href="javascript:void(0)" class="resend-invite btn btn-sm btn-primary" data-member-id="{{ member.id }}" style="padding: 0 4px; margin-top: 2px">Resend invite</a>
              {% endif %}
            {% endif %}
          </td>
          <td>{{ member.get_role_display }}</td>
          {% if can_remove_members or member_can_leave %}
          <td class="align-right squash">
            <a href="{% url 'sentry-organization-member-settings' organization.slug member.id %}"
               class="btn btn-default btn-sm">
              {% trans "Details" %}
            </a>
            {% if member.user != request.user %}
              {% if can_remove_members %}
                <a href="javascript:void(0)" class="btn btn-danger btn-sm remove-member"
                    data-member-id="{{ member.id }}">
                  <span class="icon icon-trash"></span> &nbsp;{% trans "Remove" %}
                </a>
              {% else %}
                <a href="javascript:void(0)" class="btn btn-sm btn-disabled tip"
                   title="You do not have access to remove this member.">
                  <span class="icon icon-trash"></span> &nbsp;{% trans "Remove" %}
                </a>
              {% endif %}
            {% elif member.user == request.user %}
              {% if member_can_leave %}
                <a href="javascript:void(0)" class="btn btn-danger btn-sm remove-member"
                    data-member-id="{{ member.id }}"
                    data-message="Are you sure you wish to leave this organization?">
                  <span class="icon icon-trash"></span> &nbsp;Leave
                </a>
              {% else %}
                <a href="javascript:void(0)" class="btn btn-sm btn-disabled tip"
                   title="You cannot leave this organization as you are the only owner.">
                  <span class="icon icon-trash"></span> &nbsp;Leave
                </a>
              {% endif %}
            {% endif %}
          </td>
          {% endif %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

{% block content_after %}
  <style>
  .member-list form {
    display: inline-block;
  }
  </style>
  <script>
  $('.remove-member').click(function(){
    var $this = $(this);
    var msg = $this.data('message') || 'Are you sure you wish to remove this member?';

    if (!confirm(msg)) {
      return;
    }

    $.ajax({
      url: '{{ URL_PREFIX }}/api/0/organizations/{{ organization.slug }}/members/' + $this.data('member-id') + '/',
      method: 'DELETE',
      success: function() {
        $this.parents('tr').remove();
      },
      error: function(xhr) {
        if (xhr.responseJSON) {
          alert('Unable to remove member: ' + xhr.responseJSON.detail);
        } else {
          alert('There was an error while trying to remove the member.');
        }
      }
    });
  });

  $('.resend-invite').click(function(){
    var $link = $(this);
    var $loader = $('<span class="icon-spinner spin"></span>');

    $link.replaceWith($loader);

    $.ajax({
      url: '{{ URL_PREFIX }}/api/0/organizations/{{ organization.slug }}/members/' + $link.data('member-id') + '/',
      data: JSON.stringify({
        reinvite: 1,
      }),
      contentType: 'application/json',
      method: 'PUT',
      success: function() {
        $loader.replaceWith('<span>Sent!</span>');
      },
      error: function() {
        $loader.replaceWith($link);
        alert('There was an error while trying to reinvite the member.');
      }
    });
  });

  $('#access_request_list a').click(function(e){
    var $el = $(this),
        $row = $el.parents('tr');
    if (!$el.data('action')) {
      return;
    }
    e.preventDefault();

    $row.addClass('loading');
    $('a', $row).attr('disabled', true);

    $.ajax({
      method: 'PUT',
      url: '{{ URL_PREFIX }}/api/0/organizations/{{ organization.slug }}/access-requests/' + $el.data('id') + '/',
      contentType: 'application/json',
      data: JSON.stringify({
        isApproved: $el.data('action') === 'approve'
      }),
      success: function() {
        $row.remove();
        if (!$('#access_request_list tbody tr').length) {
          $('#access_request_list').remove();
        }
      },
      error: function() {
        window.alert('We were unable to act on the access request. Maybe someone else beat you to it?');
        $('a', $row).attr('disabled', false);
      }
    });
  });
  $('.tip').tooltip();
  </script>
{% endblock %}
