{% extends 'projectroles/project_base.html' %}

{% load rules %}
{% load projectroles_common_tags %}
{% block title %}Members of {{ project.title }}{% endblock title %}

{% block css %}

{{ block.super }}
<style type="text/css">
  table#sodar-pr-role-list-table tbody td:nth-child(5) {
    width: 3em;
  }

  /* Responsive modifications */
  @media screen and (max-width: 1000px) {
    .table#sodar-pr-role-list-table thead tr th:nth-child(2),
    .table#sodar-pr-role-list-table tbody tr td:nth-child(2) {
        display: none;
    }
  }

  @media screen and (max-width: 750px) {
      .table#sodar-pr-role-list-table thead tr th:nth-child(3),
      .table#sodar-pr-role-list-table tbody tr td:nth-child(3) {
          display: none;
      }
  }
</style>

{% endblock css %}

{% block projectroles_extend %}

{% has_perm 'projectroles.update_project_owner' request.user project as can_update_owner %}
{% has_perm 'projectroles.update_project_members' request.user project as can_update_members %}
{% has_perm 'projectroles.update_project_delegate' request.user project as can_update_delegate %}
{% has_perm 'projectroles.invite_users' request.user project as can_invite %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h3>
    <i class="iconify" data-icon="mdi:account-multiple"></i>
    {% get_display_name project.type title=True %} Members
  </h3>
  {% if can_update_members or can_invite %}
    {% include 'projectroles/_role_list_buttons.html' with project=project can_update_members=can_update_members can_invite=can_invite %}
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
  {% if project.is_remote %}
    {% if can_update_members or can_invite %}
      <div class="alert alert-info">
        This is a remote project. You can only update or invite members on the
        source site of this project.
        <a href="{{ remote_roles_url }}" target="_blank">
          Click here to access member management.
        </a>
      </div>
    {% endif %}
  {% endif %}

  <div class="card" id="sodar-pr-role-list">
    <div class="card-body p-0">
      <table class="table table-striped sodar-card-table"
             id="sodar-pr-role-list-table">
        <thead>
          <tr>
            <th>User</th>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for i_owner in inherited_owners %}
            {% get_info_link 'Ownership inherited from parent category' as inherit_info %}
            <tr>
              <td class="text-muted">{{ i_owner.user.username }}</td>
              <td class="text-muted">{{ i_owner.user.name }}</td>
              <td><a href="mailto:{{ i_owner.user.email }}">{{ i_owner.user.email }}</a></td>
              <td class="text-muted"><strong>Inherited Owner</strong> {{ inherit_info | safe }}</td>
              <td></td>
            </tr>
          {% endfor %}
          <tr>
            <td>{{ owner.user.username }}</td>
            <td>{{ owner.user.name }}</td>
            <td><a href="mailto:{{ owner.user.email }}">{{ owner.user.email }}</a></td>
            <td>
              <strong>{% get_display_name project.type title=True %} Owner
              <i class="iconify" data-icon="mdi:star"></i></strong>
            </td>
            <td>
              {% if not project.is_remote and can_update_owner %}
                {% include 'projectroles/_project_roles_buttons_owner.html' with user=owner.user assignment_id=owner.sodar_uuid %}
              {% endif %}
            </td>
          </tr>
          {% for delegate in delegates %}
            <tr>
              <td>{{ delegate.user.username }}</td>
              <td>{{ delegate.user.name }}</td>
              <td><a href="mailto:{{ delegate.user.email }}">{{ delegate.user.email }}</a></td>
              <td>
                <strong>{% get_display_name project.type title=True %} Delegate
                <i class="iconify" data-icon="mdi:star-half-full"></i></strong>
              </td>
              <td>
                {% if not project.is_remote and can_update_delegate %}
                  {% include 'projectroles/_project_roles_buttons.html' with user=delegate.user assignment_id=delegate.sodar_uuid %}
                {% endif %}
              </td>
            </tr>
          {% endfor %}
          {% for member in members %}
            <tr>
              <td>{{ member.user.username }}</td>
              <td>{{ member.user.name }}</td>
              <td><a href="mailto:{{ member.user.email }}">{{ member.user.email }}</a></td>
              <td>{% get_role_display_name member title=True %}</td>
              <td>
                {% if not project.is_remote and can_update_members %}
                  {% include 'projectroles/_project_roles_buttons.html' with user=member.user assignment_id=member.sodar_uuid %}
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}

  {# Tour content #}
  <script type="text/javascript">
    tourEnabled = true;

    tour.addStep('role_list', {
        title: 'Members List',
        text: 'List of users given access for this ' +
            '{% get_display_name "PROJECT" %} can be seen here.',
        attachTo: '#sodar-pr-role-list top',
        advanceOn: '.docs-link click',
        showCancelLink: true
    });

    if ($('#sodar-pr-btn-role-list').length) {
        tour.addStep('role_actions', {
            title: 'Member Operations Menu',
            text: 'Use this menu to add members, send invites or view existing ' +
                'invites.',
            attachTo: '#sodar-pr-btn-role-list left',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }

    if ($('div.pr_role_buttons').length) {
        tour.addStep('role_menu', {
            title: 'Member Editing Menu',
            text: 'Individual memberships can be updated or removed from these ' +
                'menues.',
            attachTo: 'div.sodar-pr-btn-grp-role left',
            advanceOn: '.docs-link click',
            showCancelLink: true,
            scrollTo: true
        });
    }
  </script>
{% endblock javascript %}
