{% set layout = "no_wrapper" %}
{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}
{% block title %} {{_('Chat Box')}} {% endblock %}
{% block js_media %}

  {% include "comments/math.html" %}
  <script type="text/javascript" src="{{ static('event.js') }}"></script>
  <script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
  {% compress js %}
    {% include "chat/chat_js.html" %}
  {% endcompress %}

  <script type="text/javascript">
    window.limit_time = 24;
    window.room_id = "{{room if room else ''}}";
    window.unread_message = 0;
    window.other_user_id = "{{other_user.id if other_user else ''}}";
    window.lock = false;
    window.lock_click_space = false;
    window.pushed_messages = new Set();

    window.load_dynamic_update = function (last_msg) {
      var receiver = new EventReceiver(
        "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
        ['{{chat_lobby_channel}}', '{{chat_channel}}'], last_msg, function (message) {
          if (window.pushed_messages.has(message.message)) {
            return;
          }
          window.pushed_messages.add(message.message);
          var room = (message.type == 'lobby') ? '' : message.room;
          if (message.author_id == {{request.profile.id}}) {
            check_new_message(message.message, message.tmp_id, room);
          }
          else {
            add_new_message(message.message, room, false);
          }
        }
      );

      return receiver;
    }
    let message_template = `
{% with message=message_template %}
  {% include "chat/message.html" %}
{% endwith %}  
    `;
    $(function() {
      load_dynamic_update({{last_msg}});
    });
  </script>

{% endblock js_media %}

{% block media %}
  {% include "chat/chat_css.html" %}
{% endblock media %}

{% block body %}
  <div class="chat">
    <div id="chat-container">
      <div id="chat-online" class="chat-left-panel sidebox">
        <div id="chat-online-content">
          <div id="search-container">
            <form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
              {% csrf_token %}
              <input id="search-handle" type="text" name="search"
                placeholder="{{ _('Search by handle...') }}">
            </form>
          </div>
          <div id="chat-online-list">
            {% include "chat/online_status.html" %}
          </div>
        </div>
      </div>
      <div id="chat-area" class="chat-right-panel">
        <div id="chat-info">
          {% include 'chat/user_online_status.html' %}
        </div>
        <div id="chat-box">
          <span id="loader" style="font-size: 2em; display: none;">
            <i class="fa fa-spinner fa-pulse"></i>
          </span>
          <ul id="chat-log">
            {% include 'chat/message_list.html' %}
          </ul>
        </div>
        <div id="chat-input-container">
          <textarea maxlength="{{5000 if room else 200}}" id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
          <div class="chat-input-icon" id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i>
          </div>
          <div class="chat-input-icon" id="submit-button">
            <i class="fa fa-arrow-right"></i>
          </div>
        </div>
        <div class="tooltip" role="tooltip">
          <emoji-picker></emoji-picker>
        </div>
      </div>
    </div>
  </div>
{% endblock body %}