polyglot/app/views/chat_rooms/show.html.erb

<!-- <button id="test-btn" class="btn btn-primary">Test Connection</button> -->

<div>
  <select id="language-1" class="input-field-text-black input-dropdown form-control">
    <% @languages.each do |language| %>
      <option value="<%= language.code %>"><%= language.name %></option>
    <% end %>
  </select>
  <form id="lang-1">
    <input type="text" class="form-control" name="language-1-input" id="language-1-input" value="" aria-describedby="basic-addon2">
  </form>
  <select id="language-2" class="input-field-text-black input-dropdown form-control">
    <% @languages.each do |language| %>
      <option value="<%= language.code %>"><%= language.name %></option>
    <% end %>
  </select>
  <form id="lang-2">
    <input type="text" class="form-control" name="language-2-input" id="language-2-input" value="" aria-describedby="basic-addon2">
  </form>
</div>

<div id="join-btn" data-room="<%= @chat_room.id %>"></div>

<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>

<div class="call-container">
  <div id="remote-video-container">
    <div id="video_overlays">

      <video id="local-video" autoplay muted></video>
    </div>
      <i class="far fa-hand-paper hand"></i>
  </div>

  <div class="translate-container">

  </div>
  <div class="messages-container-container">
    <div id="messages-container" style="color: white;">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" name="chat-input" id="chat-input" value="" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
      </div>
    </div>
  </div>
</div>

<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>

<%= javascript_pack_tag 'chatrooms' %>
<%= javascript_pack_tag 'webrtc' %>
<%= javascript_pack_tag 'translate' %>