@section('sidebar-content')
<!-- app chat user profile left sidebar start -->
<div class="chat-user-profile">
    <header class="chat-user-profile-header text-center border-bottom">
      <span class="chat-profile-close">
        <i class="bx bx-x"></i>
      </span>
      <div class="my-2">
        <div class="avatar">
          <img src="{{asset('images/portrait/small/avatar-s-11.jpg')}}" alt="user_avatar" height="100" width="100">
        </div>
        <h5 class="mb-0">John Doe</h5>
        <span>Designer</span>
      </div>
    </header>
    <div class="chat-user-profile-content">
      <div class="chat-user-profile-scroll">
        <h6 class="text-uppercase mb-1">ABOUT</h6>
        <p class="mb-2">It is a long established fact that a reader will be distracted by the readable content .</p>
        <h6>PERSONAL INFORAMTION</h6>
        <ul class="list-unstyled mb-2">
          <li class="mb-25">email@gmail.com</li>
          <li>+1(789) 950 -7654</li>
        </ul>
        <h6 class="text-uppercase mb-1">CHANNELS</h6>
        <ul class="list-unstyled mb-2">
          <li><a href="javascript:void(0);"># Devlopers</a></li>
          <li><a href="javascript:void(0);"># Designers</a></li>
        </ul>
        <h6 class="text-uppercase mb-1">SETTINGS</h6>
        <ul class="list-unstyled">
          <li class="mb-50 "><a href="javascript:void(0);" class="d-flex align-items-center"><i class="bx bx-tag mr-50"></i> Add
              Tag</a></li>
          <li class="mb-50 "><a href="javascript:void(0);" class="d-flex align-items-center"><i class="bx bx-star mr-50"></i>
              Important Contact</a>
          </li>
          <li class="mb-50 "><a href="javascript:void(0);" class="d-flex align-items-center"><i class="bx bx-image-alt mr-50"></i>
              Shared
              Documents</a></li>
          <li class="mb-50 "><a href="javascript:void(0);" class="d-flex align-items-center"><i class="bx bx-trash-alt mr-50"></i>
              Deleted
              Documents</a></li>
          <li><a href="javascript:void(0);" class="d-flex align-items-center"><i class="bx bx-block mr-50"></i> Blocked
              Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- app chat user profile left sidebar ends -->
  <!-- app chat sidebar start -->
  <div class="chat-sidebar card">
    <span class="chat-sidebar-close">
      <i class="bx bx-x"></i>
    </span>
    <div class="chat-sidebar-search">
      <div class="d-flex align-items-center">
        <div class="chat-sidebar-profile-toggle">
          <div class="avatar">
            <img src="{{asset('images/portrait/small/avatar-s-11.jpg')}}" alt="user_avatar" height="36" width="36">
          </div>
        </div>
        <fieldset class="form-group position-relative has-icon-left mx-75 mb-0">
          <input type="text" class="form-control round" id="chat-search" placeholder="Search">
          <div class="form-control-position">
            <i class="bx bx-search-alt text-dark"></i>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="chat-sidebar-list-wrapper pt-2">
      <h6 class="px-2 pb-25 mb-0">CHANNELS<i class="bx bx-plus float-right cursor-pointer"></i></h6>
      <ul class="chat-sidebar-list">
        <li>
          <h6 class="mb-0"># Devlopers</h6>
        </li>
        <li>
          <h6 class="mb-0"># Designers</h6>
        </li>
      </ul>
      <h6 class="px-2 pt-2 pb-25 mb-0">CHATS</h6>
      <ul class="chat-sidebar-list">
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-26.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-busy"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Elizabeth Elliott</h6><span class="text-muted">Cake pie</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-7.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-online"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Kristopher Candy</h6><span class="text-muted">jelly jelly</span>
            </div>
          </div>
        </li>
      </ul>
      <h6 class="px-2 pt-2 pb-25 mb-0">CONTACTS<i class="bx bx-plus float-right cursor-pointer"></i></h6>
      <ul class="chat-sidebar-list">
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-8.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-away"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Sarah Woods</h6><span class="text-muted"> lemon drops</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar bg-info m-0 mr-50">
              <span class="avatar-content">JP</span>
              <span class="avatar-status-offline"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Jenny Perich</h6><span class="text-muted">candy canes.</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-5.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-online"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Rock Montgomery</h6><span class="text-muted">powder gum</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-9.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-busy"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Heather Howell</h6><span class="text-muted">cheesecake toffee</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50 bg-success">
              <span class="avatar-content">KR</span>
              <span class="avatar-status-offline"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Kelly Reyes</h6><span class="text-muted">gingerbread</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-14.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-online"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Vince Nelson</h6><span class="text-muted">Puddingdrops</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-3.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-offline"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Drake Elliott</h6><span class="text-muted">jelly helloi</span>
            </div>
          </div>
        </li>
        <li>
          <div class="d-flex align-items-center">
            <div class="avatar m-0 mr-50"><img src="{{asset('images/portrait/small/avatar-s-7.jpg')}}" height="36"
                width="36" alt="sidebar user image">
              <span class="avatar-status-online"></span>
            </div>
            <div class="chat-sidebar-name">
              <h6 class="mb-0">Kristopher Candy</h6><span class="text-muted">jujubes</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>{{--  --}}
  <!-- app chat sidebar ends -->
@endsection
