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

{% load rules %}
{% load static %}
{% load projectroles_tags %}
{% load projectroles_role_tags %}
{% load projectroles_common_tags %}

{% block title %}Members of {{ project.title }}{% endblock title %}

{% block css %}
  {{ block.super }}
  <!-- DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/b-2.0.1/datatables.min.css" />

  <style type="text/css">
    div#sodar-pr-role-list-input-group {
      max-width: 200px;
    }
    table#sodar-pr-role-list-table {
        margin: 0 !important;
    }
    table#sodar-pr-role-list-table tbody td:nth-child(5) {
      width: 3em;
    }
    /* DataTables modifications */
    th.sorting {
      padding-left: 10px !important;
      border-bottom: 0 !important;
    }
    th.sorting::after {
      padding-top: 7px !important;
    }
    .previous::before, .next::after {
      display: none !important;
    }
    /* 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 %}
{% get_info_link finder_info as finder_info_link %}
{% get_display_name project.type title=True as project_type_title %}
{% get_user_superuser_icon as superuser_icon %}
{% get_user_inactive_icon as inactive_icon %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h3>
    <i class="iconify" data-icon="mdi:account-multiple"></i>
    {{ project_type_title }} Members
  </h3>
  <div class="ml-auto">
    {% if user_has_role and not site_read_only %}
      <span class="d-inline-block" tabindex="0" data-toggle="tooltip"
            id="sodar-pr-btn-leave-tooltip"
            title="{{ project_leave_msg }}">
        <a role="button" class="btn btn-danger ml-auto"
           {% if own_local_as %}
             href="{% url 'projectroles:role_delete_own' roleassignment=own_local_as.sodar_uuid %}"
           {% else %}
             href="#"
           {% endif %}
           {% if not project_leave_access %}disabled="disabled"{% endif %}
           id="sodar-pr-btn-leave-project">
          <i class="iconify" data-icon="mdi:account-remove"></i>
          Leave {{ project_type_title }}
        </a>
    </span>
  {% endif %}
  {% if role_perms.can_update_members or role_perms.can_invite %}
    {% include 'projectroles/_project_role_ops.html' %}
  {% endif %}
  </div>
</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-header">
      <h4>
        <i class="iconify" data-icon="mdi:account-multiple"></i> Members
        <div class="input-group sodar-header-input-group pull-right"
             id="sodar-pr-role-list-input-group">
          <input class="form-control"
                 type="text"
                 placeholder="Filter"
                 aria-label="Filter roles"
                 id="sodar-pr-role-list-filter" />
        </div>
      </h4>
    </div>
    <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 %}
            {% include 'projectroles/_project_role_item.html' %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}
  <!-- Variables -->
  <script type="text/javascript">
    window.roleListPagination = {{ role_pagination }};
  </script>
  <!-- DataTables -->
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/b-2.0.1/datatables.min.js"></script>
  <!-- Project list -->
  <script type="text/javascript" src="{% static 'projectroles/js/role_list.js' %}"></script>

  <!-- 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
    })
    tour.addStep('role_filter', {
      title: 'Filter Members',
      text: 'You can filter the member list by entering text here.',
      attachTo: '#sodar-pr-role-list-filter left',
      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-btn-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-btn-owner left',
        advanceOn: '.docs-link click',
        showCancelLink: true,
      })
    }
    if ($('.sodar-pr-role-btn').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-btn left',
        advanceOn: '.docs-link click',
        showCancelLink: true,
      })
    }
    if ($('#sodar-pr-role-ops-btn').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-btn left',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
    if ($('#sodar-pr-btn-leave-project').length) {
      tour.addStep('role_ops', {
        title: 'Leave Project',
        text: 'Click this button to leave this ' +
              '{% get_display_name 'PROJECT' %} or ' +
              '{% get_display_name 'CATEGORY' %}. In case of the latter, ' +
              'leaving will also remove your inherited roles its children.',
        attachTo: '#sodar-pr-btn-leave-project left',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
  </script>
{% endblock javascript %}