{% 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">
  <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">
          <i class="iconify" data-icon="mdi:send"></i> Send
        </button>
      </div>
    </div>
  </form>
</div>

<span class="sodar-popup-overlay" id="sodar-pr-invite-preview-popup"></span>

{% 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');

              var body = '{{ preview_body }}';
              var roleName = $('#id_role').find('option:selected').text();
              var message = $('#id_message').val();
              body = body.replace('{role_name}', roleName);

              var 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 %}
