<!-- User -->
<div
  class="user-item is-active"
  data-chat-user="dan"
  data-full-name="Dan Walker"
  data-status="Online"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/dan.jpg"
      alt=""
    />
    <div class="user-status is-online"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="stella"
  data-full-name="Stella Bergmann"
  data-status="Busy"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/stella.jpg"
      alt=""
    />
    <div class="user-status is-busy"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="daniel"
  data-full-name="Daniel Wellington"
  data-status="Away"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/daniel.jpg"
      alt=""
    />
    <div class="user-status is-away"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="david"
  data-full-name="David Kim"
  data-status="Busy"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/david.jpg"
      alt=""
    />
    <div class="user-status is-busy"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="edward"
  data-full-name="Edward Mayers"
  data-status="Online"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/edward.jpeg"
      alt=""
    />
    <div class="user-status is-online"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="elise"
  data-full-name="Elise Walker"
  data-status="Away"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/elise.jpg"
      alt=""
    />
    <div class="user-status is-away"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="nelly"
  data-full-name="Nelly Schwartz"
  data-status="Busy"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/nelly.png"
      alt=""
    />
    <div class="user-status is-busy"></div>
  </div>
</div>
<!-- User -->
<div
  class="user-item"
  data-chat-user="milly"
  data-full-name="Milly Augustine"
  data-status="Busy"
>
  <div class="avatar-container">
    <img
      class="user-avatar"
      src="https://via.placeholder.com/300x300"
      data-demo-src="assets/img/avatars/milly.jpg"
      alt=""
    />
    <div class="user-status is-busy"></div>
  </div>
</div>
