{% 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">
        <textarea name="message_box" id="message_box" cols="50" rows="3" style="resize:none;" placeholder="Type your message here..."></textarea>
        <button type="submit" class="btn btn-primary">Send</button>
    </form>
</div>
{% endblock %}