{% extends "base.html" %}
{% load staticfiles %}{% load i18n %}{% get_current_language as LANGUAGE_CODE %}

{% block css %}{% endblock %}
{% block js %}
    <script src='{% static 'bower_components/requirejs/require.js' %}'></script>
    <script nonce="2726c7f26c">
        require(["{% static 'js/app/requirejs-config.js' %}"], function (config) { require(['chat']); });
    </script>
{% endblock %}

{% block title %}: Chatting{% endblock %}

{% block main %}
    <div id="chat">
        <div id="chat-header">
            <img id="chat-close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAgAAAAIACH+pydAAACmklEQVRYw+2WTU8TURSGn1KFRNtaE+MCl7gAV6KyENoVlSgbAkPHlWlq4sSfYFyYYAJbFyYEJgTTSCKpDOpGEuPHxlA2wkr9E9IS+5FAZ+a6mJkyrR067VJ7kpvJ3PvmnPd83gtd6UpX/ncJtALMJB/MBQKBJ+49LaueBQ4BoxEvyYpw/xuGvvBWW50DdMBsm6EkK2I/XxC6rgtd18WyuiZsI1Eg2IhdVtdq2P18wcFeBHqb6T/lh0QkHEIIy7H76bsIBEBBy6rngSJgSLIibiXi1rmNjYRDjoowUAaOGnX3+CGwsrqOaZq1lU7JJMbjSLJSAMKSrIjEeJx0Sq7DrayuOyqCXrZaRsDOdxkE6ZRc20+nkmBHIjEeI51K1jwHeJHJ8vHTV7SsOmx7brSy5SVBICrJilhcyohKpdJyLS5lnNxfBQZoUi/t1IABFO18F4QQpO7NeoIzLzf4/GXb8bwI7NvfjiPwVyTy+bzn8ut5OxGoiwRAtVpthT0EDvx43g4BJFnR47ERTNN7nsRjIwA/tKx6wY9O3wQkWRGxsRskpckTCSSlSacbfrnnhBf+xPy4jY+NXmd25g5CiNp6rb1HXXnF72KJocGB2v6VocuUSmVCkf5HP79/ewZUsXu2bQKSrIjRm9eQpm/XGd/Y3GI7t4uWVYdDkf6HxQYSQ4MWifC5k0n4moTTUxN1E85tHKtFL23ndtnY3KrDTU9NOCqiQF/HNVAslgmFzgDw5t0Hcjt7jX1esfKtFBzCAKVSxVHRS6eDyDD0hafzzx+79zyGjOGQyO3sucgfLNvnTSu35XvAZh/FutEcL45o3udBGxfl+Pp15scBTW5DPwR67Eid5rhmDDweJDaJPhdZE6sAO3uQdKUr/7z8AdpKodP6cSkFAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEwLTAyLTExVDAxOjI5OjU2LTA2OjAwhu7P/QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAwOC0xMi0wN1QxNTo1Mjo1OS0wNjowMB72NwkAAAAASUVORK5CYII=" width="32" height="32" alt="close" />
        </div>
        
        <div id="chat-body"></div>
        
        <div id="chat-type">
            {{ form.as_p }}
            <button class="btn btn-green btn-grey">
                {% trans "send message" %}
            </button>
        </div>
    </div>
{% endblock %}

{% block onload_js_options %}
    <select id="chatBootstrap">
        <option value="endPoint">//{{ host }}/api</option>
        <option value="userToken">{{ user_token }}</option>
        <option value="chatStatus">{{ chat_status }}</option>
    </select>
{% endblock %}
