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

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

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

{% block css %}
  {{ block.super }}
  <style type="text/css">
    /* 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 %}

{% 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 %}
{% has_perm 'projectroles.import_roles' request.user project as can_import %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h3><i class="iconify" data-icon="mdi:email"></i> Member Invites</h3>
  {% if 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">
  <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>
         {% if invites.count > 0 %}
           {% for invite in invites %}
             <tr>
               <td><a href="mailto:{{ invite.email }}">{{ invite.email }}</a></td>
               <td>{{ invite.role.name }}</td>
                 <td><a href="{{ invite.issuer.email }}">{{ invite.issuer.username }}</a></td>
               <td>{{ invite.date_expire|date:'Y-m-d H:i' }}</td>
               <td class="text-right">
                 {% if can_invite %}
                   {% include 'projectroles/_project_invites_buttons.html' with project=project invite_uuid=invite.sodar_uuid %}
                 {% endif %}
               </td>
             </tr>
           {% endfor %}
         {% else %}
           <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('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
    });

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

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