{% set userData = app.session.get('userData') %}

<div id="chat-header">
  <i class="fa {{ chat.chatType == 'Private' ? 'fa-user-circle' : 'fa-users' }}"></i>
    <a href="{{ path('chat_form',{action:'u',id:chat.getIdEncoded}) }}"><i class="fa fa-info-circle float-right"></i></a>

    <span style="text-transform: capitalize">
    {{ chat.chatType == 'Private' and chat.accountUser.id != userData.id ? chat.accountUser.fullName  : chat.description }}
    </span>
</div>
<div id="chat-container">
    {% for c in msgs %}
    <div class="chat-msg-container">
        <div 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 id="chat-input-container">
    <input type="text" id="txt-chat-msg" placeholder="Enter your message here...">
</div>