{% extends "../base.html" %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css"
          href="{{fix_static('css/form.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{fix_static('css/emoji_chat.css')}}">
    <script type="module" src="{{fix_static('js/emoji_chat/chat.js')}}"></script>
{% end %}

{% block body %}
    <section id="message-section">
        {% for msg in messages %}
            <div class="message">
                {% for emoji in msg["author"] %}{% raw emoji2html(emoji) %}{% end %}:
                {% for emoji in msg["content"] %}{% raw emoji2html(emoji) %}{% end %}
            </div>
        {% end %}
    </section>

    <form method="post">
        <div tooltip="Nicht mit WebSocket verbunden (kein JS verfügbar)"
             tooltip-position="right"
             data-state="disconnected"
             id="connection-state"></div>
        Du bist: <div id="current-user">{% for emoji in user_name %}{% raw emoji2html(emoji) %}{% end %}</div>
        <input id="message-input" type="text" name="message">
        <button type="submit">Senden!</button>
    </form>
{% end %}
