room.html

{% extends './base.html' %}

{% load static %}
{% block content %}

<style>
    body {
        background-color: #36393f;
        color: #fff;
    }
</style>

<div>

    {% if request.user.is_authenticated %}

    <div class="mb-3" style="display:flex;gap:20px;">

        <!-- Chat Box -->
        <div style="width:70%;height:65vh;">

            <ul class="p-2 custom-overflow-bar" id="chat-log"
                style="border:2px dashed black;height:65vh;overflow-y:scroll;">
                {% for each_message in earlier_room_messages %}

                <li>
                    <div style="display:flex;">
                        <div class="message-parent-css">
                            <img class="discord-icon-css" src="{% static 'svgs/discord.svg' %}" height="26px"
                                width="26px" />
                        </div>
                        <div style="width: 95%;">
                            <div id="message-by-user" style="color:#5865f2;">
                                {{ each_message.user.username }}
                            </div>
                            <div id="message-content">
                                {{ each_message.content }}
                            </div>
                        </div>
                    </div>
                    <hr />
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Online Users -->
        <div class="p-2 custom-overflow-bar" style="width:30%; border:2px solid black;height:65vh;overflow-y:scroll;">
            <b>Online Users <span id="num-of-users"></span></b>
            <div class="p-2">
                <ul id="online-logs" class="p-2 custom-li-bullet">

                </ul>
            </div>
        </div>

    </div>

    <!-- New Message and Leave Room Logics -->
    <div class="mb-3 p-2" style="display:flex; gap: 20px;">

        <input class="custom-input-css" placeholder="new message..." id="chat-message-input" type="text" />

        <button class="custom-btn-css" id="chat-message-submit" type="submit">Send message</button>

        <a href="/chat/" style="color:inherit;text-decoration:none;">
            <button class="custom-btn-css" type="button" style="border:2px solid #ff4d4d;">Leave Room</button>
        </a>
    </div>

    {% else %}

    <span class="text-danger">
        <h3>Login Required.</h3>
    </span>

    {% endif %}
    <!-- Safely outputs a Python object as JSON, wrapped in a <script> tag, 
        ready for use with JavaScript, with an optional HTML "id" -->
    {{ room_name|json_script:"room-name" }}

    <!-- Frontend Events Logic -->

    <script src="{% static 'js/room.js' %}" type="text/javascript"></script>

    {% endblock %}