{% set userData = app.session.get('userData') %}
{#<div id="chat-popup">#}
    <div class="chat-header">
        <i class="fa {{ chat.chatType == 'Private' ? 'fa-user-circle' : 'fa-users' }}"></i>
        <a id="chat-popup-close" class="float-right" href="javascript:void(0)"><i class="fa fa-close "></i></a>
        <span style="text-transform: capitalize">
        {{ chat.chatType == 'Private' and chat.accountUser.id != userData.id ? chat.accountUser.fullName  : chat.description }}
        </span>
    </div>
    <div class="chat-container">
        {% for c in msgs %}
            <div class="chat-msg-container">
                <div {#style="{{ loop.index0 == msgs|length - 1 ? 'margin-bottom: 60px' : '' }}"#} class="chat-msg {{ c.chatParticipant.accountUser.id == userData.id ? 'pull-left' : 'pull-right' }}">
                    <div><a href="javascript:void(0)">{{ c.chatParticipant.accountUser.id == userData.id ? '' : c.chatParticipant.accountUser.fullName }}</a> <span class="chat-datetime">{{ c.createdat|date('Y-m-d h:i A') }}</span></div>
                    <div>{{ c.message }}</div>
                </div>
                <div class="chat-avatar  {{ c.chatParticipant.accountUser.id == userData.id ? 'pull-right' : 'pull-left' }}">
                    <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
                </div>
            </div>
        {% endfor %}
        {#<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>
<div class="chat-msg-container">
    <div class="chat-msg pull-left">
        <div class="chat-datetime">08-08008</div>
        <div>Test</div>
    </div>
    <div class="chat-avatar pull-right">
        <img src="/bundles/rxconnexion/admin/images/main-menu-default-avatar.png" />
    </div>
</div>#}
    </div>
    <div class="chat-input-container">
        <input type="text" class="txt-chat-msg" placeholder="Enter your message here..." autofocus>
    </div>
{#</div>#}