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

{% load crispy_forms_filters %}
{% load projectroles_tags %}

{% block title %}Send Invite for {{ project.title }}{% endblock title %}

{% block projectroles_extend %}

<div class="row sodar-subtitle-container bg-white">
  <h3>Send Invite</h3>
</div>

<div class="container-fluid sodar-page-container">
  <div class="alert alert-info">
    Email invites are intended for people who do not yet have a user account on
    this site. To add members who already have an active user account, use the
    <a href="{% url 'projectroles:role_create' project=project.sodar_uuid %}">
      Add Member
    </a> form.
  </div>
  <form method="post">
    {% csrf_token %}
    {{ form | crispy }}
    <div class="row">
      <div class="btn-group ml-auto">
        <a role="button" class="btn btn-secondary"
           href="{{ request.session.real_referer }}">
          <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
        </a>
        <a role="button" class="btn btn-primary text-light"
           id="sodar-pr-invite-preview-link"
           data-toggle="modal" data-target="#sodar-modal">
          <i class="iconify" data-icon="mdi:eye"></i> Preview
        </a>
        <button type="submit" class="btn btn-primary sodar-btn-submit-once">
          <i class="iconify" data-icon="mdi:send"></i> Send
        </button>
      </div>
    </div>
  </form>
</div>

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}
  <script type="text/javascript">
    // TODO: Move to js file and unify with roleassignment_form js
    $(document).ready(function() {
      $('#sodar-pr-invite-preview-link').click(function () {
        $('.modal-title').text('Invite Preview')
        let body = '{{ preview_body }}'
        let roleName = $('#id_role').find('option:selected').text()
        let message = $('#id_message').val()
        body = body.replace('{role_name}', roleName)
        let htmlData = '<strong>Subject:</strong><pre>{{ preview_subject }}</pre>'
        htmlData += '<strong>To:</strong><pre>' + $('#id_email').val() + '</pre>'
        htmlData += '<strong>Body:</strong>'
        htmlData += '<pre id="sodar-email-body">' + body
        if (message !== '') {
          htmlData += '{{ preview_message }}'.replace('{message}', message)
        }
        htmlData += '{{ preview_footer }}'
        htmlData += '</pre>'
        $('.modal-body').html(htmlData)
      })
    })
  </script>
{% endblock javascript %}
