{% extends 'base_main.html' %}

{% block scripts %}
    var page = 1;
    function setPage(number) {
        page = number;
    }
    function doPoll() {
        jQuery.get('/messages?chat_id={{ chat.id }}&page=' + page.toString(), function(data) {
            var e = document.getElementById('messages');
            if (e.innerHTML !== data)
                e.innerHTML = data;
            const name = "page_num_" + page.toString();
            elem = document.getElementById(name);
            if (elem) {
                elem.className = "btn btn-dark";
            }
            setTimeout(function() {doPoll()}, 2000);
        })
    }
{% endblock %}

{% block onload %}doPoll(){% endblock %}

{% block main %}
    <div class="row">
        <div class="col">
            <a href="/account?username={{ chat.user.username }}" style="font-size: 40px;"><i class="fa fa-arrow-left"></i></a>
        </div>
        <div class="col">
            <img src="{{ chat.user.userinfo.profile_pic_url }}" width="50px" height="50px" style="border-radius: 50%; margin-right: 10px;">
        </div>
        <div class="col-10">
            <p style="font-size: 40px;">{{ chat.user.username }}</p>
        </div>
    </div>
    <form method="POST">
        {% csrf_token %}
        <textarea name="text" style="width: 100%; height: 100px;"></textarea>
        <button type="submit" class="btn btn-dark">Отправить</button>
    </form>
    <div id="messages"></div>
{% endblock %}