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

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

{% block title %}
  {% if object.pk %}
    Update Member {{ object.user.get_form_label }} in {{ object.project.title }}
  {% elif promote_as %}
    Promote Member {{ promote_as.user.get_form_label }}
  {% else %}
    Add Member
  {% endif %}
  in {{ project.title }}
{% endblock title %}

{% block projectroles_extend %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  {% if object.pk %}
    <h3>Update Member {{ object.user.get_form_label }}</h3>
  {% elif promote_as %}
    <h3>Promote Member {{ promote_as.user.get_form_label }}</h3>
  {% else %}
    <h3>Add Member</h3>
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
  <form method="post">
    {% csrf_token %}
    {# Add form.media for DAL #}
    {{ form.media }}
    {{ 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-email-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">
          {% if object.pk %}
            <i class="iconify" data-icon="mdi:check-bold"></i> Update
          {% elif promote_as %}
            <i class="iconify" data-icon="mdi:account-arrow-up"></i> Promote
          {% else %}
            <i class="iconify" data-icon="mdi:account-plus"></i> Add
          {% endif %}
        </button>
      </div>
    </div>
  </form>
</div>

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}
  <script type="text/javascript">
    $(document).ready(function() {
      $('#sodar-pr-email-preview-link').click(function () {
        $('.modal-title').text('Email Preview')
        let body = '{{ preview_body }}'
        let userName = $('#id_user').find('option:selected').text()
        if (!userName) {
            userName = '{{ promote_as.user.get_full_name }}'
        } else {
          userName = userName.substr(0, userName.indexOf('(') - 1)
        }
        let roleName = $('#id_role').find('option:selected').text()
        body = body.replace('{role_name}', roleName)
        body = body.replace('{user_name}', userName)
        let htmlData = '<strong>Subject:</strong><pre>{{ preview_subject }}</pre>'
        htmlData += '<strong>Body:</strong>'
        htmlData += '<pre id="sodar-email-body">' + body
        htmlData += '</pre>'
        $('.modal-body').html(htmlData)
      })
    })
  </script>
  <!-- DAL redirect event listener -->
  <script type="text/javascript" src="{% static 'projectroles/js/autocomplete_redirect.js' %}"></script>
{% endblock javascript %}
