{% extends "base.html" %}

{% block content %}
<div class="mx-auto text-center">
    <h1>Messaging</h1>
    {% if user.profile_image %}
    <img src="static/uploads/{{ user.profile_image }}" class="border rounded-circle red-border mimg senderpic">
    {% else %}
    <img src="static/uploads/default.png" class="border rounded-cirle red-border mimg senderpic">
    {% endif %}

    {% if recipient.profile_image %}
    <img src="static/uploads/{{ recipient.profile_image }}" class="border rounded-circle red-border mimg recvrpic">
    {% else %}
    <img src="static/uploads/default.png" class="border rounded-circle red-border mimg recvrpic">
    {% endif %}
    <div>
        <p class="msging_name text-left">{{ user.firstname }} is talking to {{ recipient.firstname }}</p>
    </div>



    <div class="message_hist border rounded text-left">
        {% for message in msg_hist %}
            {%if message.sender == user.id %}
            <p class="sender_msg"><span style="font-weight: bolder;">{{ user.firstname }}</span> : {{ message.message }}</p>
            {% else %}
            <p class="rcvr_msg"><span style="font-weight: bolder;">{{ recipient.firstname }}</span> : {{ message.message }}</p>
            {% endif %}
        {% endfor %}
    </div>

    <form method="POST">
        {{ form.hidden_tag() }}

        {{ form.msg(placeholder="Write you message here!", cols="50", rows="4") }}
        {{ form.submit(class="btn btn-primary")}}
        <!--
        -->
    </form>
</div>
{% endblock %}