{%- extends 'root.html' -%}
{% block pagetitle -%}Chat{%- endblock %}
{% block pagetype %}chat{% endblock %}
{% block body_attributes %}class="has_header"{% endblock %}
{% block body %}
	{% include "header.html" %}
	{% include "modals/expanded_image.html" %}
	{% include "modals/emoji.html" %}
	{% include "util/macros.html" %}
	{% set vlink = '<a href="/id/' ~ v.id ~ '">' %}
	<div class="container pb-4">

		<div class="orgy-top-container">
			<div class="col text-left pt-3 orgy-info-window-item">
				<h2>{{orgy.title}}</h1>
				<div>
					{% if orgy.is_youtube() %}
						<lite-youtube videoid="{{orgy.data}}" params="autoplay=1&modestbranding=1"/>
					{% elif orgy.is_rumble() %}
						<iframe class="rumble rumble-player" width="100%"  src="{{orgy.data}}" frameborder="0" allowfullscreen></iframe>  
					{% elif orgy.is_twitch() %}
						<iframe
							src="https://player.twitch.tv/?channel={{orgy.data}}&parent={{site}}"
							class="rumble-player"
							allowfullscreen>
						</iframe>
					{%endif%}
				</div>
				<a href="/old_chat" class="btn btn-primary ml-auto" value="Old Chat">Old Chat</a>
				{{macros.chat_users_list()}}
			</div>

			<div class="orgy-chat-window-item">
				<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_users_online()}}
				{{macros.chat_window(vlink)}}
			</div>

		</div>
	</div>

	<input id="vid" hidden value="{{v.id}}">
	<input id="site_name" hidden value="{{SITE_NAME}}">
	<input id="slurreplacer" hidden value="{{v.slurreplacer}}">
	<input id="admin_level" hidden value="{{v.admin_level}}">
	<script defer src="{{'js/vendor/socketio.js' | asset}}"></script>
	<script defer src="{{'js/chat.js' | asset}}"></script>
	<script defer src="{{'js/vendor/lozad.js' | asset}}"></script>
	<script defer src="{{'js/vendor/lite-youtube.js' | asset}}"></script>
{% endblock %}