{% extends "header.html.twig" %}

{% block body_content %}
    <style>
        .direct-chat-messages {
            height: 100%;
            max-height: 700px
        }
    </style>
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Chat Details #</h3>
        </div>

        <div class="box-body">
            <div class="card card-danger direct-chat direct-chat-danger">
                <div class="card-body">
                    {% if chat_count>0 %}
                        <div class="direct-chat-messages">
                            {% for chat in chat_array %}
                                {% if chat.is_your_message == 1 %}
                                    <div class="direct-chat-msg">
                                        <div class="direct-chat-infos clearfix">
                                            <span class="direct-chat-name float-left">{{ chat.name }}</span>
                                            <span class="direct-chat-timestamp float-right">{{ chat.created_at }}</span>
                                        </div>
                                        <img class="direct-chat-img"
                                             src="http://134.209.147.163:7070//theme/adminlte/dist/img/admin-user.png"
                                             alt="message user image">
                                        <div class="direct-chat-text">
                                            {{ chat.message|raw }}
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="direct-chat-msg right">
                                        <div class="direct-chat-infos clearfix">
                                            <span class="direct-chat-name float-right">{{ chat.name }}</span>
                                            <span class="direct-chat-timestamp float-left">{{ chat.created_at }}</span>
                                        </div>
                                        <img class="direct-chat-img" src="{{ base_url }}/{{ chat.image }}"
                                             onerror="src='{{ base_url }}/theme/adminlte/dist/img/admin-user.png'">
                                        <div class="direct-chat-text">
                                            {{ chat.message|raw }}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="cart-title text-center">
                            <h4>No Chat Found</h4>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock body_content %}