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

<!--Extends the Chat app base-->
{% extends base_template %}

<!--Django staticfiles functions are loaded using this tag-->
{% load static %}

<!--AI==========================================================
	Extra CSS that applies to this template.
===========================================================AI-->
{% block django_chatter_extrahead %}
	{{ block.super }}
	<title>{{room_name}} | Chatter</title>
	<link rel="stylesheet" href="{% static 'css/chat-window.css' %}">
	<!--Jquery-->
	<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
{% endblock django_chatter_extrahead %}

{% block django_chatter_content %}
{{ block.super }}
<div class="app-container">
	<div class="chat-container">
			<!--AI==========================================================
				This inherits the list of chats that a user belongs to.
			===========================================================AI-->
			<div class="chatroom-list-container chat-subsection">
				{% include 'django_chatter/chatroom-list.html' %}
			</div>

			<!--AI==========================================================
				The following contains the chat dialog div properties
			===========================================================AI-->
			<div class = "dialog-container chat-subsection">
				<div id = "room-title">
					<div class="back-button-container">
						<img id="back-button" src="{% static 'img/left-arrow.svg' %}">
					</div>
					<div>{{room_name}}</div>
				</div>
				<div id = "chat-dialog">
					<!--AI==========================================================
						Fetch latest 50 messages and display them properly.
					===========================================================AI-->
					{% for message in latest_messages_curr_room reversed %}
						{% if message.sender.username == user.username %}
							<div class="message-container">
								<div class="message message-sent">
									{{message.text}}
								</div>
								<div class="message message-sent message-date-created">
									{{message.date_created|date:"d M Y H:i:s e"}}
								</div>
							</div>
						{% else %}
							<div class="message-container">
								<div class="message-received-container">
									<div class="receiver-bubble">
										{{message.sender|make_list|first|title}}
									</div>
									<div class="message message-received">
										{{message.text}}
									</div>
								</div>
								<div class="message message-received message-date-created
									message-received-date-created">
									{{message.date_created|date:"d M Y H:i:s e"}}
								</div>

							</div>
						{% endif %}
					{% endfor %}
				</div>
				<div class = "input-container">
					<input type="text" id = "send-message" rows = "1"
						placeholder = "Type your message...">
					<div id="send-btn-parent">
						<img id="send-button" height="30px" role="button"
							src="{% static 'img/send-button.svg' %}">
					</div>
				</div>
			</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-->
	</div>
</div>
<script>
	var room_id = '{{room_uuid_json}}';
	var get_room_url = '{% url "django_chatter:get_messages" uuid=room_uuid_json %}';
	var username = '{{user.username}}';
</script>
<script src = "{% static 'js/dateFormatter.js' %}"></script>
<script src = "{% static 'js/websocketHelpers.js' %}"></script>
<script src = "{% static 'js/chatSocket.js' %}"></script>
<script src = "{% static 'js/alertSocket.js' %}"></script>
<script src = "{% static 'js/chatWindow.js' %}"></script>
<script src = "{% static 'js/fetchMessages.js' %}"></script>
{% endblock django_chatter_content %}
