{% load i18n static %}

<div class="col-lg-{{ widget.size }}">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title box-title">Live Chat</h4>
      <div class="card-content scrollable">
        <div class="messenger-box">
          <ul>
            <li>
              <div class="msg-received msg-container">
                <div class="avatar">
                  <img src="{% static 'djello/images/avatar/64-1.jpg' %}" alt="">
                  <div class="send-time">11.11 am</div>
                </div>
                <div class="msg-box">
                  <div class="inner-box">
                    <div class="name">
                      John Doe
                    </div>
                    <div class="meg">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sunt placeat velit ad reiciendis ipsam   
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.msg-received -->
            </li>
            <li>
              <div class="msg-sent msg-container">
                <div class="avatar">
                  <img src="{% static 'djello/images/avatar/64-2.jpg' %}" alt="">
                  <div class="send-time">11.11 am</div>
                </div>
                <div class="msg-box">
                  <div class="inner-box">
                    <div class="name">
                      John Doe
                    </div>
                    <div class="meg">
                      Hay how are you doing?  
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.msg-sent -->
            </li>
          </ul>
          <div class="send-mgs">
            <div class="yourmsg">
              <input class="form-control" type="text">
            </div>
            <button class="btn msg-send-btn">
            <i class="pe-7f-paper-plane"></i>
            </button>
          </div>
        </div>
        <!-- /.messenger-box -->
      </div>
    </div>
    <!-- /.card-body -->
  </div>
  <!-- /.card -->
</div>