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

{% load rules %}
{% load projectroles_tags %}
{% load projectroles_role_tags %}
{% 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 %}

{% get_role_perms project request.user as role_perms %}

<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 role_perms.can_update_members or role_perms.can_invite %}
    {% include 'projectroles/_project_role_ops.html' %}
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
  {% if project.is_remote %}
    {% if role_perms.can_update_members or role_perms.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 role_as in roles %}
            <tr class="sodar-pr-role-list-row" data-user-uuid="{{ role_as.user.sodar_uuid }}">
              <td>{{ role_as.user.username }}</td>
              <td>{{ role_as.user.name }}</td>
              <td><a href="mailto:{{ role_as.user.email }}">{{ role_as.user.email }}</a></td>
              <td class="sodar-pr-role-item-role">
                {% get_role_display_name role_as.role project title=True as role_display %}
                {% if role_as.project != project %}
                  <i class="iconify text-primary" data-icon="mdi:arrow-down-circle"></i>
                  <a href="{% url 'projectroles:roles' project=role_as.project.sodar_uuid %}"
                     title="Role inherited from {{ role_as.project.title }}"
                     data-toggle="tooltip" data-placement="top">
                    {{ role_display }}
                  </a>
                {% else %}
                  <i class="iconify" data-icon="{% get_role_icon role_as.role %}"></i>
                  {{ role_display }}
                {% endif %}
              </td>
              <td>
                {% display_role_buttons project role_as role_perms as can_display_buttons %}
                {% if can_display_buttons %}
                  {% if role_as.role.name == 'project owner' %}
                    {% include 'projectroles/_project_role_dropdown_owner.html' with user=role_as.user role_as_uuid=role_as.sodar_uuid %}
                  {% else %}
                    {% include 'projectroles/_project_role_dropdown.html' with user=role_as.user role_as_uuid=role_as.sodar_uuid %}
                  {% endif %}
                {% 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: 'Member 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-role-item-role').length) {
        tour.addStep('role_item_role', {
            title: 'Member Role',
            text: 'The role of each member is displayed in this column. A ' +
                  'member can have one role in a project. Roles can be ' +
                  'inherited from parent ' +
                  '{% get_display_name 'CATEGORY' plural=True %}. In that ' +
                  'case, the role label links to from where it was ' +
                  'Inherited. To learn more about different roles, see the ' +
                  'user manual of this site or the SODAR Core documentation.',
            attachTo: '.sodar-pr-role-item-role top',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
    if ($('.sodar-pr-role-dropdown-owner').length) {
        tour.addStep('role_dropdown_owner', {
            title: 'Owner Dropdown',
            text: 'Ownership can be transferred to another user from this ' +
                  'dropdown.',
            attachTo: '.sodar-pr-role-dropdown-owner left',
            advanceOn: '.docs-link click',
            showCancelLink: true,
        });
    }
    if ($('.sodar-pr-role-dropdown').length) {
        tour.addStep('role_dropdown', {
            title: 'Member Dropdown',
            text: 'For a non-owner member, you can update or remove the ' +
                  'member role through this dropdown. Note that for ' +
                  'inherited users, only promoting the inherited role is ' +
                  'allowed. To remove such a role, navigate to the parent ' +
                  '{% get_display_name 'CATEGORY' %} and remove the ' +
                  'membership there.',
            attachTo: '.sodar-pr-role-dropdown left',
            advanceOn: '.docs-link click',
            showCancelLink: true,
        });
    }
    if ($('#sodar-pr-role-ops-dropdown').length) {
        tour.addStep('role_ops', {
            title: 'Member Operations Dropdown',
            text: 'From this dropdown you can access operations for adding ' +
                  'new members to the {% get_display_name 'PROJECT' %} and ' +
                  'inviting users not yet on the site.',
            attachTo: '#sodar-pr-role-ops-dropdown left',
            advanceOn: '.docs-link click',
            showCancelLink: true
        });
    }
  </script>
{% endblock javascript %}
