{% extends 'base.html' %} 
{% block content %}
<div class="message-box">
  <h2>Chat Room: {{code}}</h2>
  <div class="messages" id="messages"></div>
  <div class="inputs">
    <input
      type="text"
      rows="3"
      placeholder="Message"
      name="message"
      id="message"
    />
    <button type="button" name="file" id="file-btn" onClick="triggerFileInput()">📁</button>
    <button type="button" name="emoji" id="emoji-btn" onClick="toggleEmojiPicker()">😀</button>
    <button type="button" name="send" id="send-btn" onClick="sendMessage()">Send</button>
    <input type="file" id="file-input" style="display: none;" />
  </div>
  <div id="emoji-picker" class="emoji-picker" style="display: none;">
    <span onClick="addEmoji('😀')">😀</span>
    <span onClick="addEmoji('😂')">😂</span>
    <span onClick="addEmoji('😍')">😍</span>
    <span onClick="addEmoji('🫵🏾')">🫵🏾</span>
    <span onClick="addEmoji('🙏🏾')">🙏🏾</span>
    <span onClick="addEmoji('💀')">💀</span>
    <span onClick="addEmoji('😘')">😘</span>
    <span onClick="addEmoji('😌')">😌</span>
    <span onClick="addEmoji('😝')">😝</span>
    <span onClick="addEmoji('😛')">😛</span>
    <span onClick="addEmoji('😫')">😫</span>
    <span onClick="addEmoji('😭')">😭</span>
    <span onClick="addEmoji('😓')">😓</span>
    <span onClick="addEmoji('🤗')">🤗</span>
    <span onClick="addEmoji('🤔')">🤔</span>
    <span onClick="addEmoji('🤬')">🤬</span>
    <span onClick="addEmoji('😤')">😤</span>
    <span onClick="addEmoji('🥶')">🥶</span>
    <span onClick="addEmoji('😪')">😪</span>
    <span onClick="addEmoji('✊🏾')">✊🏾</span>
    <span onClick="addEmoji('😊')">😊</span>
    <span onClick="addEmoji('😇')">😇</span>
    <span onClick="addEmoji('🙃')">🙃</span>
    <span onClick="addEmoji('😉')">😉</span>
    <span onClick="addEmoji('😋')">😋</span>
    <span onClick="addEmoji('😜')">😜</span>
    <span onClick="addEmoji('🤪')">🤪</span>
    <span onClick="addEmoji('😎')">😎</span>
    <span onClick="addEmoji('🥳')">🥳</span>
    <span onClick="addEmoji('😡')">😡</span>
    <span onClick="addEmoji('😠')">😠</span>
    <span onClick="addEmoji('🤤')">🤤</span>
    <span onClick="addEmoji('😢')">😢</span>
    <span onClick="addEmoji('😱')">😱</span>
    <span onClick="addEmoji('😰')">😰</span>
    <span onClick="addEmoji('😥')">😥</span>
    <span onClick="addEmoji('😓')">😓</span>
    <span onClick="addEmoji('🤒')">🤒</span>
    <span onClick="addEmoji('🤕')">🤕</span>
    <span onClick="addEmoji('🤑')">🤑</span>
    <span onClick="addEmoji('🤠')">🤠</span>
    <span onClick="addEmoji('😷')">😷</span>
    <span onClick="addEmoji('🤧')">🤧</span>
    <span onClick="addEmoji('🤮')">🤮</span>
    <span onClick="addEmoji('🤫')">🤫</span>
    <span onClick="addEmoji('🤭')">🤭</span>
    <span onClick="addEmoji('🧐')">🧐</span>
    <span onClick="addEmoji('🤓')">🤓</span>
    <span onClick="addEmoji('😈')">😈</span>
    <span onClick="addEmoji('👿')">👿</span>
    <span onClick="addEmoji('👹')">👹</span>
    <span onClick="addEmoji('👺')">👺</span>
    <span onClick="addEmoji('👻')">👻</span>
    <span onClick="addEmoji('💩')">💩</span>
    <span onClick="addEmoji('😺')">😺</span>
    <span onClick="addEmoji('😸')">😸</span>
    <span onClick="addEmoji('😹')">😹</span>
    <span onClick="addEmoji('😻')">😻</span>
    <span onClick="addEmoji('😼')">😼</span>
    <span onClick="addEmoji('😽')">😽</span>
    <span onClick="addEmoji('🙀')">🙀</span>
    <span onClick="addEmoji('😿')">😿</span>
    <span onClick="addEmoji('😾')">😾</span>
    <span onClick="addEmoji('👋')">👋</span>
    <span onClick="addEmoji('🤚')">🤚</span>
    <span onClick="addEmoji('🖐️')">🖐️</span>
    <span onClick="addEmoji('✋')">✋</span>
    <span onClick="addEmoji('👌')">👌</span>
    <span onClick="addEmoji('🤏')">🤏</span>
    <span onClick="addEmoji('✌️')">✌️</span>
    <span onClick="addEmoji('🤞')">🤞</span>
    <span onClick="addEmoji('🤟')">🤟</span>
    <span onClick="addEmoji('🤘')">🤘</span>
    <span onClick="addEmoji('🤙')">🤙</span>
    <span onClick="addEmoji('👈')">👈</span>
    <span onClick="addEmoji('👉')">👉</span>
    <span onClick="addEmoji('👆')">👆</span>
    <span onClick="addEmoji('👇')">👇</span>
    <span onClick="addEmoji('☝️')">☝️</span>
    <span onClick="addEmoji('👍')">👍</span>
    <span onClick="addEmoji('👎')">👎</span>
    <span onClick="addEmoji('✊')">✊</span>
    <span onClick="addEmoji('👊')">👊</span>
    <span onClick="addEmoji('🤛')">🤛</span>
    <span onClick="addEmoji('🤜')">🤜</span>
    <span onClick="addEmoji('👏')">👏</span>
    <span onClick="addEmoji('🙌')">🙌</span>
    <span onClick="addEmoji('👐')">👐</span>
    <span onClick="addEmoji('🤲')">🤲</span>
    <span onClick="addEmoji('🤝')">🤝</span>
    <span onClick="addEmoji('🙏')">🙏</span>
    <span onClick="addEmoji('✍️')">✍️</span>
    <span onClick="addEmoji('💅')">💅</span>
    <span onClick="addEmoji('🤳')">🤳</span>
    <span onClick="addEmoji('💪')">💪</span>
    <span onClick="addEmoji('🦵')">🦵</span>
    <span onClick="addEmoji('🦶')">🦶</span>
    <span onClick="addEmoji('👂')">👂</span>
    <span onClick="addEmoji('👃')">👃</span>
    <span onClick="addEmoji('👀')">👀</span>
    <span onClick="addEmoji('👁️')">👁️</span>
    <span onClick="addEmoji('👅')">👅</span>
    <span onClick="addEmoji('👄')">👄</span>
    <span onClick="addEmoji('🧑')">🧑</span>
    <span onClick="addEmoji('👨')">👨</span>
    <span onClick="addEmoji('👩')">👩</span>
    <span onClick="addEmoji('👧')">👧</span>
    <span onClick="addEmoji('👦')">👦</span>
    <span onClick="addEmoji('🧒')">🧒</span>
    <span onClick="addEmoji('👶')">👶</span>
    <span onClick="addEmoji('👵')">👵</span>  
  </div>
</div>
<style>
    body {
      font-family: Arial, sans-serif;
      background-color: hsl(212deg, 100%, 25%);
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
    .message-box {
      background: hsl(183deg, 79%, 36%);
      padding: 2rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 22px;
      max-width: 600px;
      width: 100%;
    }
  
    .message-box h2 {
      margin-bottom: 1rem;
      color: #333;
    }
  
    .messages {
    background-color: #f1f1f1;
    padding: 1rem;
    border-radius: 4px;
    max-height: 400px;
    min-height: 300px; /* Add this line to ensure a bigger height */
    height: 400px; /* Set a fixed height to make the space for messages larger */
    overflow-y: auto;
    margin-bottom: 1rem;
    }
  
    .text {
      padding: 0.5rem;
      border-bottom: 1px solid #ddd;
    }
  
    .text:last-child {
      border-bottom: none;
    }
  
    .text span {
      display: block;
    }
  
    .text .muted {
      color: #999;
      font-size: 0.8rem;
      text-align: right;
    }
  
    .inputs {
      display: flex;
      align-items: center;
    }
  
    .inputs input[type="text"] {
      flex: 1;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-right: 0.5rem;
      font-size: 1rem;
    }
  
    .inputs button {
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #007bff;
      color: #fff;
      transition: background-color 0.3s ease;
      margin-left: 0.5rem;
    }
  
    .inputs button:hover {
      opacity: 0.9;
    }
  
    .emoji-picker {
      background: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0.5rem;
      position: absolute;
      bottom: 60px; /* Adjust as needed */
      display: flex;
      flex-wrap: wrap;
      max-width: 200px;
    }
  
    .emoji-picker span {
      cursor: pointer;
      font-size: 1.5rem;
      margin: 0.2rem;
    }
  </style>
  
  <script type="text/javascript">
    var socketio = io();
  
    const messages = document.getElementById("messages");
  
    const createMessage = (name, msg) => {
      const content = `
      <div class="text">
          <span>
              <strong>${name}</strong>: ${msg}
          </span>
          <span class="muted">
              ${new Date().toLocaleString()}
          </span>
      </div>
      `;
      messages.innerHTML += content;
    };
  
    socketio.on("message", (data) => {
      createMessage(data.name, data.message);
    });
  
    const sendMessage = () => {
      const message = document.getElementById("message");
      if (message.value == "") return;
      socketio.emit("message", { data: message.value });
      message.value = "";
    };
  
    const toggleEmojiPicker = () => {
      const emojiPicker = document.getElementById("emoji-picker");
      emojiPicker.style.display = emojiPicker.style.display === "none" ? "block" : "none";
    };
  
    const addEmoji = (emoji) => {
      const messageInput = document.getElementById("message");
      messageInput.value += emoji;
    };
  
    const triggerFileInput = () => {
      const fileInput = document.getElementById("file-input");
      fileInput.click();
    };
  
    document.getElementById('file-input').addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        // Handle the file upload or processing here
        console.log('File selected:', file.name);
      }
    });
  </script>
  
  {% for msg in messages %}
  <script type="text/javascript">
    createMessage("{{msg.name}}", "{{msg.message}}");
  </script>
  {% endfor %} 
  {% endblock %}