{%- extends 'root.html' -%}
{% block pagetitle -%}Chat{%- endblock %}
{% block pagetype %}chat{% endblock %}
{% block body_attributes %}class="has_header"{% endblock %}
{% block body %}
	<link rel="stylesheet" href="{{'css/chat.css' | asset}}">
	{% include "header.html" %}
	{% include "modals/expanded_image.html" %}
	{% include "modals/emoji.html" %}
	{% include "modals/gif.html" %}
	{% set vlink = '<a href="/id/' ~ v.id ~ '"' %}
	<div class="container pb-4 pb-md-2">
		<div class="row justify-content-around" id="main-content-row">
			<div class="col h-100 {% block customPadding %}custom-gutters{% endblock %}" id="main-content-col">
				{{macros.chat_users_online()}}

				<div id="chat-group-template" class="d-none">
					{{macros.chat_group_template()}}
				</div>
			</div>

			<div id="chat-line-template" class="d-none">
				{{macros.chat_line_template()}}
			</div>

			{{macros.chat_window(vlink)}}
		</div>

		{{macros.chat_users_list()}}
	</div>

	<input id="vid" hidden value="{{v.id}}">
	<input id="slurreplacer" hidden value="{{v.slurreplacer}}">
	<input id="admin_level" hidden value="{{v.admin_level}}">
	<input id="blocked_user_ids" hidden value="{{(v.userblocks|string)[1:-1]}}">
	<script defer src="{{'js/vendor/socketio.js' | asset}}"></script>
	<script defer src="{{'js/flash.js' | asset}}"></script>
	<script defer src="{{'js/vendor/lozad.js' | asset}}"></script>
	<script defer src="{{'js/vendor/lite-youtube.js' | asset}}"></script>
	<script defer src="{{'js/chat.js' | asset}}"></script>
{% endblock %}