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

{% load rules %}
{% load projectroles_role_tags %}
{% load projectroles_common_tags %}

{% block title %}Member Invites for {{ project.title }}{% endblock title %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    .table#sodar-pr-role-invite-table thead tr th:nth-child(4),
    .table#sodar-pr-role-invite-table tbody tr td:nth-child(4) {
      width: 170px;
    }
    .table#sodar-pr-role-invite-table thead tr th:nth-child(5),
    .table#sodar-pr-role-invite-table tbody tr td:nth-child(5) {
      width: 80px;
    }
    /* Responsive modifications */
    @media screen and (max-width: 800px) {
      .table#sodar-pr-role-invite-table thead tr th:nth-child(3),
      .table#sodar-pr-role-invite-table tbody tr td:nth-child(3) {
        display: none;
      }
    }
    @media screen and (max-width: 600px) {
      .table#sodar-pr-role-invite-table thead tr th:nth-child(4),
      .table#sodar-pr-role-invite-table tbody tr td:nth-child(4) {
        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:email"></i> Member Invites</h3>
  {% if role_perms.can_invite %}
    <div class="ml-auto">
      {% include 'projectroles/_project_role_ops.html' with project=project %}
    </div>
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
  <div class="card" id="sodar-pr-invite-list">
    <div class="card-body p-0">
     <table class="table table-striped sodar-card-table"
            id="sodar-pr-role-invite-table">
       <thead>
         <tr>
           <th>Email</th>
           <th>Role</th>
           <th>Issuer</th>
           <th>Expires</th>
           <th></th>
         </tr>
       </thead>
       <tbody>
         {% for invite in invites %}
           <tr>
             <td><a href="mailto:{{ invite.email }}">{{ invite.email }}</a></td>
             <td>{% get_role_display_name invite.role project title=True %}</td>
             <td>
               <a href="{{ invite.issuer.email }}">
                 {{ invite.issuer.username }}
               </a>
             </td>
             <td class="sodar-pr-invite-item-expire">
               {{ invite.date_expire|date:'Y-m-d H:i' }}
             </td>
             <td class="text-right">
               {% if role_perms.can_invite %}
                 {% include 'projectroles/_project_invite_dropdown.html' with project=project invite_uuid=invite.sodar_uuid %}
               {% endif %}
             </td>
           </tr>
         {% endfor %}
         {% if not invites %}
           <tr>
             <td class="bg-faded font-italic text-center" colspan="5">
               No active invites.
             </td>
           </tr>
         {% endif %}
       </tbody>
     </table>
    </div>
  </div>
</div>

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}
  <!-- Tour content -->
  <script type="text/javascript">
    tourEnabled = true
    tour.addStep('role_invites', {
      title: 'Member Invites',
      text: 'In this view you can invite people who are not yet users of the ' +
            'site to become members in the ' +
            '{% get_display_name 'PROJECT' %}. For people who are already ' +
            'users on the site, you should use "Add Member" instead.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    tour.addStep('invite_list', {
      title: 'Invite List',
      text: 'List of existing invites for this ' +
            '{% get_display_name 'PROJECT' %} can be seen here.',
      attachTo: '#sodar-pr-invite-list top',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    if ($('.sodar-pr-invite-item-expire').length) {
      tour.addStep('invite_expire', {
        title: 'Invite Expiry Date',
        text: 'Invites will expire after a time set by the site' +
              'administration. The expiry date for each invite is displayed' +
              'in this column.',
        attachTo: '.sodar-pr-invite-item-expire top',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
    if ($('.sodar-pr-invite-dropdown').length) {
      tour.addStep('role_menu', {
        title: 'Invite Dropdown',
        text: 'The invite can be resent or revoked through this dropdown.',
        attachTo: '.sodar-pr-invite-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 %}
