{% extends "khaganat/base.html" %}
{% load i18n %}

{% block headers %}
<!-- TODO: build it instead of using a CDN -->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css">
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js" charset="utf-8"></script>
<style>
#converse-container {
    height: 800px; // TODO: change this!
}
</style>
{% endblock %}

{% block title %}{% trans "chat_title" %}{% endblock %}

{% block content %}
<div class="content-bloc">
    <div id="converse-container">
        <div id="conversejs"></div>
    </div>
</div>
{% endblock %}

{% block endscript %}
<script>
    converse.initialize({
        allow_contact_removal: false,
        allow_contact_requests: false,
        allow_logout: false,
        allow_muc: true,
        allow_muc_invitations: false,
        allow_registration: false,
        anonymous: true,
        authentication: 'anonymous',
        auto_join_rooms: [
            {% for name in rooms %}'{{name}}',{% endfor %}
        ],
        auto_login: true,
        {% if bosh_url %}bosh_service_url: '{{ bosh_url }}',{% endif %}
        debug: {{ debug|lower }},
        hide_open_bookmarks: false,
        {% if jid %}jid: '{{ jid }}',{% endif %}
        show_controlbox_by_default: true,
        sticky_controlbox: true,
        view_mode: 'embedded',
        {% if websocket_url %}websocket_url: '{{ websocket_url }}',{% endif %}
    });
</script>
{% endblock %}