{% load static %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
{% if tinymce_api_key %}
  <script src="https://cdn.tiny.cloud/1/{{ tinymce_api_key }}/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
{% else %}
  {# Fallback to TinyMCE's limited no-api-key usage #}
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
{% endif %}
<script src="{% static 'unicom/js/tinymce_init.js' %}"></script>
<script src="{% static 'unicom/js/tinymce_ai_template.js' %}"></script>
{% include "admin/unicom/includes/ai_template_modal.html" %}

<div class="form-container email-form-container">
  <div class="form-inner">
    <div class="selected-message-container">
      <div class="selected-message-header">
        <i class="fas fa-reply reply-icon"></i>
        <span>Replying to message</span>
        <button type="button" class="clear-selection"><i class="fas fa-times"></i></button>
      </div>
      <div class="selected-message-content"></div>
    </div>

    <form method="post" action="" class="chat-form email-form">
      {% csrf_token %}
      <input type="hidden" name="reply_to_id" id="reply_to_id">
      <input type="hidden" name="message_type" value="email">
      <textarea id="email-editor" name="message_html"></textarea>
      <button type="submit" class="send-button">Send Email <i class="fas fa-paper-plane"></i></button>
    </form>
  </div>
</div>

<style>
.email-form-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--form-bg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 550px;
  padding-bottom: 20px;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.email-form-container.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tox-tinymce {
  border-radius: 4px !important;
  max-height: 250px !important;
}

.selected-message-container {
  display: block;
}
</style>

<script>
  let emailEditor = null;

  function initEmailEditor() {
    UnicomTinyMCE.init('#email-editor', {
      setup: function (ed) {
        emailEditor = ed;
      },
      channel_id: '{{ channel_id }}'  // Use the channel_id passed from the view
    });
  }

  // Initialize editor when form becomes visible
  document.addEventListener('DOMContentLoaded', function () {
    const formContainer = document.querySelector('.email-form-container');
    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          if (formContainer.classList.contains('visible')) {
            initEmailEditor();
          }
        }
      });
    });

    observer.observe(formContainer, {
      attributes: true
    });
  });
</script> 