<!--AI==========================================================
	Every chat session will have this html page rendered.
===========================================================AI-->

<!--Extends the Chat app base-->
{% extends 'django_chatter/base.html' %}

<!--Django static files directory is loaded using this tag-->
{% load static %}

<!--AI==========================================================
	Extra CSS that applies to this template.
===========================================================AI-->
{% block extrahead %}
	{{ block.super }}
	<link rel="stylesheet" href="{% static 'css/chat-window.css' %}">
{% endblock %}

{% block content %}
{{ block.super }}
<i class="fas fa-arrow-left"></i>
<!--AI==========================================================
	This inherits the list of chats that a user belongs to.
===========================================================AI-->

{% include 'django_chatter/chatroom-list.html' %}

<!--AI==========================================================
	The following contains the chat dialog div properties
===========================================================AI-->
<div class = "chat-container">
	<div id = "chat-dialog">
		<!--AI==========================================================
			Fetch latest 50 messages and display them properly.
		===========================================================AI-->
		{% for message in latest_messages reversed %}
			{% if message.sender.username == user.username %}
				<div class="message-container">
					<div class="message message-sent">
						{{message.text}}
					</div>
				</div>
			{% else %}
				<div class="message-container">
					<div class="message message-received">
						{{message.text}}
					</div>
				</div>
			{% endif %}
		{% endfor %}
	</div>
	<div class = "input-container">
		<textarea id = "send-message" rows = "1"
			placeholder = "Type your message..."></textarea>
		<button id = "send-button">Send</button>
	</div>
</div>

<!--AI==========================================================
	These JS files load after the page has loaded.
	1) searchuser.js: fetches a list of users from the server
	2) chat-window.js: contains websocket functions for this
		chat page.
===========================================================AI-->
<script>
	var room_id = '{{room_uuid_json}}';
	var username = '{{user.username}}';
</script>
<script src = "{% static 'js/chat-window.js' %}"></script>
<script src = "{% static 'js/fetch-messages.js' %}"></script>
{% endblock content %}
