templates/chat/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Chat</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Apps</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Chat</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                              <!-- ROW -->
  20.                             <div class="row row-deck">
  21.                                 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-4">
  22.                                     <div class="card  overflow-scroll">
  23.                                         <div class="main-content-app pt-0">
  24.                                             <div class="main-content-left main-content-left-chat">
  25.                                                 <div class="card-body d-flex">
  26.                                                     <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/faces/6.jpg'))}}"></div>
  27.                                                     <div class="main-chat-msg-name">
  28.                                                         <p class="text-normal mb-0 text-14">Elena Gilbert</p>
  29.                                                         <span class="dot-label bg-success"></span><small class="me-3">Available</small>
  30.                                                     </div>
  31.                                                     <nav class="nav ms-auto">
  32.                                                         <div class="dropdown">
  33.                                                             <a class="nav-link text-muted fs-20" href="javascript:void(0)" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
  34.                                                             <div class="dropdown-menu dropdown-menu-start">
  35.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-user me-1"></i> Profile</a>
  36.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-edit me-1"></i> Edit</a>
  37.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-users me-1"></i> New Group</a>
  38.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-settings me-1"></i> Settings</a>
  39.                                                                 <a class="dropdown-item" href="#"><i class="fe fe-trash-2 me-1"></i> Delete</a>
  40.                                                             </div>
  41.                                                         </div>
  42.                                                     </nav>
  43.                                                 </div>
  45.                                                 <!-- main-chat-header -->
  46.                                                 <div class="card-body overflow-scroll border-bottom">
  47.                                                     <div class="input-group mb-2">
  48.                                                         <input type="text" class="form-control" placeholder="Search ...">
  49.                                                         <span class="input-group-text btn btn-primary text-white">Search</span>
  50.                                                     </div>
  51.                                                     <div class="main-chat-contacts-wrapper p-0">
  52.                                                         <label class="form-label mb-2">Online Users</label>
  53.                                                         <div class="lSSlideOuter main-chat-contacts-slider ">
  54.                                                             <div class="main-chat-contacts-slider lSSlideWrapper usingCss overflow-scroll">
  55.                                                                 <div class="main-chat-contacts lightSlider lsGrab lSSlide ps-0" id="chatActiveContacts" style="width: 464px; height: 59px; padding-bottom: 0%;">
  56.                                                                     <div class="lslide active">
  57.                                                                         <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/5.jpg'))}}" style="background: url(&quot;../build/images/users/5.jpg&quot;) center center;">
  58.                                                                 <span class="avatar-status bg-green"></span>
  59.                                                                         </span><small>Ariana</small>
  60.                                                                     </div>
  61.                                                                     <div class="lslide">
  62.                                                                         <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/9.jpg'))}}" style="background: url(&quot;../build/images/users/9.jpg&quot;) center center;">
  63.                                                                 <span class="avatar-status bg-green"></span>
  64.                                                                         </span><small>Monino</small>
  65.                                                                     </div>
  66.                                                                     <div class="lslide">
  67.                                                                         <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/6.jpg'))}}" style="background: url(&quot;../build/images/users/6.jpg&quot;) center center;">
  68.                                                                 <span class="avatar-status bg-green"></span>
  69.                                                                         </span><small>Reynante</small>
  70.                                                                     </div>
  71.                                                                     <div class="lslide">
  72.                                                                         <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/7.jpg'))}}" style="background: url(&quot;../build/images/users/7.jpg&quot;) center center;">
  73.                                                                 <span class="avatar-status bg-green"></span>
  74.                                                                         </span><small>Labares</small>
  75.                                                                     </div>
  76.                                                                     <div class="lslide">
  77.                                                                         <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/5.jpg'))}}" style="background: url(&quot;../build/images/users/5.jpg&quot;) center center;">
  78.                                                                 <span class="avatar-status bg-green"></span>
  79.                                                                         </span><small>Rolando</small>
  80.                                                                     </div>
  81.                                                                     <div class="lslide">
  82.                                                                         <div class="avatar avatar-md bradius bg-primary-transparent text-primary">
  83.                                                                             <i class="fe fe-plus"></i>
  84.                                                                         </div><small>More</small>
  85.                                                                     </div>
  86.                                                                 </div>
  87.                                                             </div>
  88.                                                         </div>
  89.                                                         <!-- main-active-contacts -->
  90.                                                     </div>
  91.                                                 </div>
  92.                                                 <div class="tab-menu-heading border-0">
  93.                                                     <div class="tabs-menu">
  94.                                                         <ul class="nav panel-tabs">
  95.                                                             <li><a href="#ChatList" class="me-2 active mb-2" data-bs-toggle="tab">Messages</a></li>
  96.                                                             <li><a href="#ChatGroups" class="me-2 mb-2"  data-bs-toggle="tab">Groups</a></li>
  97.                                                             <li><a href="#ChatContacts" class="me-2 mb-2"  data-bs-toggle="tab">Contacts</a></li>
  98.                                                             <li><a href="#ChatContacts1" data-bs-toggle="tab">Networks</a></li>
  99.                                                         </ul>
  100.                                                     </div>
  101.                                                 </div>
  102.                                                 <div class="tab-content main-chat-list flex-2">
  103.                                                     <div class="tab-pane active" id="ChatList">
  104.                                                         <div class="main-chat-list tab-pane">
  105.                                                             <a class="media new border-top-0" href="#">
  106.                                                                 <div class="main-img-user online">
  107.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/5.jpg'))}}">
  108.                                                                 </div>
  109.                                                                 <div class="media-body">
  110.                                                                     <div class="media-contact-name">
  111.                                                                         <span>Raymart Santiago</span> <span>10 min</span>
  112.                                                                     </div>
  113.                                                                     <p> Hey! there I'm available </p>
  114.                                                                 </div>
  115.                                                             </a>
  116.                                                             <a class="media new" href="#">
  117.                                                                 <div class="main-img-user">
  118.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/6.jpg'))}}"> <span>3</span>
  119.                                                                 </div>
  120.                                                                 <div class="media-body">
  121.                                                                     <div class="media-contact-name">
  122.                                                                         <span>Ariana Monino</span> <span>30 min</span>
  123.                                                                     </div>
  124.                                                                     <p>Good Morning</p>
  125.                                                                 </div>
  126.                                                             </a>
  127.                                                             <a class="media selected" href="#">
  128.                                                                 <div class="main-img-user online"><img alt="" src="{{absolute_url(asset('build/images/users/9.jpg'))}}"></div>
  129.                                                                 <div class="media-body">
  130.                                                                     <div class="media-contact-name">
  131.                                                                         <span>Saul Goodmate</span> <span>9.40 am</span>
  132.                                                                     </div>
  133.                                                                     <p> Nice to meet you </p>
  134.                                                                 </div>
  135.                                                             </a>
  136.                                                             <a class="media new" href="#">
  137.                                                                 <span class="avatar avatar-md brround bg-danger-transparent text-danger">J</span>
  138.                                                                 <div class="media-body">
  139.                                                                     <div class="media-contact-name">
  140.                                                                         <span>Joyce Chua</span> <span>11.20 am</span>
  141.                                                                     </div>
  142.                                                                     <p> Hi, How are you? </p>
  143.                                                                 </div>
  144.                                                             </a>
  145.                                                             <a class="media new" href="#">
  146.                                                                 <div class="main-img-user"><img alt="" src="{{absolute_url(asset('build/images/users/4.jpg'))}}"></div>
  147.                                                                 <div class="media-body">
  148.                                                                     <div class="media-contact-name">
  149.                                                                         <span>Rolando Paloso</span> <span>1.38 pm</span>
  150.                                                                     </div>
  151.                                                                     <p> Hey! there I'm available </p>
  152.                                                                 </div>
  153.                                                             </a>
  154.                                                             <a class="media new" href="#">
  155.                                                                 <div class="main-img-user">
  156.                                                                     <div class="avatar avatar-md brround bg-primary-transparent text-primary">D</div><span>1</span>
  157.                                                                 </div>
  158.                                                                 <div class="media-body">
  159.                                                                     <div class="media-contact-name">
  160.                                                                         <span>Dexter dela Cruz</span> <span>4.08 pm</span>
  161.                                                                     </div>
  162.                                                                     <p>Typing...</p>
  163.                                                                 </div>
  164.                                                             </a>
  165.                                                             <a class="media new" href="#">
  166.                                                                 <div class="main-img-user"><img alt="" src="{{absolute_url(asset('build/images/users/20.jpg'))}}"></div>
  167.                                                                 <div class="media-body">
  168.                                                                     <div class="media-contact-name">
  169.                                                                         <span>Maricel Villalon</span> <span>8.09 pm</span>
  170.                                                                     </div>
  171.                                                                     <p> Hey! there I'm available </p>
  172.                                                                 </div>
  173.                                                             </a>
  174.                                                             <a class="media new" href="#">
  175.                                                                 <span class="avatar avatar-md brround bg-success-transparent text-success">M</span>
  176.                                                                 <div class="media-body">
  177.                                                                     <div class="media-contact-name">
  178.                                                                         <span>Maryjane Pechon</span> <span>1 day ago</span>
  179.                                                                     </div>
  180.                                                                     <p>I have some work</p>
  181.                                                                 </div>
  182.                                                             </a>
  183.                                                             <a class="media new" href="#">
  184.                                                                 <div class="main-img-user"><img alt="" src="{{absolute_url(asset('build/images/users/5.jpg'))}}"></div>
  185.                                                                 <div class="media-body">
  186.                                                                     <div class="media-contact-name">
  187.                                                                         <span>Lovely Dela Cruz</span> <span>3 days ago</span>
  188.                                                                     </div>
  189.                                                                     <p>I have some work</p>
  190.                                                                 </div>
  191.                                                             </a>
  192.                                                             <a class="media new" href="#">
  193.                                                                 <div class="avatar avatar-md brround bg-secondary-transparent"><i class="fe fe-user text-secondary"></i></div>
  194.                                                                 <div class="media-body">
  195.                                                                     <div class="media-contact-name">
  196.                                                                         <span>Daniel Padilla</span> <span>5 days ago</span>
  197.                                                                     </div>
  198.                                                                     <p>I have some work</p>
  199.                                                                 </div>
  200.                                                             </a>
  201.                                                             <a class="media new" href="#">
  202.                                                                 <div class="main-img-user"><img alt="" src="{{absolute_url(asset('build/images/users/3.jpg'))}}"></div>
  203.                                                                 <div class="media-body">
  204.                                                                     <div class="media-contact-name">
  205.                                                                         <span>John Pratts</span> <span>20/06/2021</span>
  206.                                                                     </div>
  207.                                                                     <p>I have some work</p>
  208.                                                                 </div>
  209.                                                             </a>
  210.                                                             <a class="media new" href="#">
  211.                                                                 <div class="main-img-user"><img alt="" src="{{absolute_url(asset('build/images/users/7.jpg'))}}"></div>
  212.                                                                 <div class="media-body">
  213.                                                                     <div class="media-contact-name">
  214.                                                                         <span>Socrates Itumay</span> <span>18/07/2021</span>
  215.                                                                     </div>
  216.                                                                     <p> Hey! there I'm available </p>
  217.                                                                 </div>
  218.                                                             </a>
  219.                                                             <a class="media border-bottom-0" href="#">
  220.                                                                 <div class="main-img-user"><img alt="" src="{{absolute_url(asset('build/images/users/6.jpg'))}}"></div>
  221.                                                                 <div class="media-body">
  222.                                                                     <div class="media-contact-name">
  223.                                                                         <span>Samuel Lerin</span> <span>29/07/2021</span>
  224.                                                                     </div>
  225.                                                                     <p> Hey! there I'm available </p>
  226.                                                                 </div>
  227.                                                             </a>
  228.                                                         </div>
  229.                                                         <!-- main-chat-list -->
  230.                                                     </div>
  231.                                                     <!-- main-chat-list -->
  232.                                                     <div class="tab-pane" id="ChatGroups">
  233.                                                         <a href="#" class="d-flex align-items-center media border-top-0">
  234.                                                             <div class="mb-0 me-2">
  235.                                                                 <div class="main-img-user online text-primary">
  236.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/4.jpg'))}}"> <span>2</span>
  237.                                                                 </div>
  238.                                                             </div>
  239.                                                             <div class="align-items-center justify-content-between">
  240.                                                                 <div class="media-body ms-2">
  241.                                                                     <div class="media-contact-name">
  242.                                                                         <span>Web Designers</span>
  243.                                                                         <span></span>
  244.                                                                     </div>
  245.                                                                 </div>
  246.                                                             </div>
  247.                                                             <div class="ms-auto"> <i class="contact-status text-primary fe fe-user-plus"></i> </div>
  248.                                                         </a>
  249.                                                         <a href="#" class="d-flex align-items-center media">
  250.                                                             <div class="mb-0 me-2">
  251.                                                                 <div class="main-img-user online">
  252.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/4.jpg'))}}"> <span>2</span>
  253.                                                                 </div>
  254.                                                             </div>
  255.                                                             <div class="align-items-center justify-content-between">
  256.                                                                 <div class="media-body ms-2">
  257.                                                                     <div class="media-contact-name">
  258.                                                                         <span>Project 2020</span>
  259.                                                                         <span></span>
  260.                                                                     </div>
  261.                                                                 </div>
  262.                                                             </div>
  263.                                                             <div class="ms-auto"> <i class="contact-status text-primary fe fe-user-plus"></i> </div>
  264.                                                         </a>
  265.                                                         <a href="#" class="d-flex align-items-center media">
  266.                                                             <div class="mb-0 me-2">
  267.                                                                 <div class="main-img-user online">
  268.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/9.jpg'))}}"> <span>2</span>
  269.                                                                 </div>
  270.                                                             </div>
  271.                                                             <div class="align-items-center justify-content-between">
  272.                                                                 <div class="media-body ms-2">
  273.                                                                     <div class="media-contact-name">
  274.                                                                         <span>Project 2021</span>
  275.                                                                         <span></span>
  276.                                                                     </div>
  277.                                                                 </div>
  278.                                                             </div>
  279.                                                             <div class="ms-auto"> <i class="contact-status text-primary fe fe-user-plus"></i> </div>
  280.                                                         </a>
  281.                                                         <a href="#" class="d-flex align-items-center media">
  282.                                                             <div class="mb-0 me-2">
  283.                                                                 <div class="main-img-user online">
  284.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/12.jpg'))}}"> <span>2</span>
  285.                                                                 </div>
  286.                                                             </div>
  287.                                                             <div class="align-items-center justify-content-between">
  288.                                                                 <div class="media-body ms-2">
  289.                                                                     <div class="media-contact-name">
  290.                                                                         <span>Freshers</span>
  291.                                                                         <span></span>
  292.                                                                     </div>
  293.                                                                 </div>
  294.                                                             </div>
  295.                                                             <div class="ms-auto"> <i class="contact-status text-primary fe fe-user-plus"></i> </div>
  296.                                                         </a>
  297.                                                         <a href="#" class="d-flex align-items-center media">
  298.                                                             <div class="mb-0 me-2">
  299.                                                                 <div class="main-img-user online">
  300.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/6.jpg'))}}"> <span>2</span>
  301.                                                                 </div>
  302.                                                             </div>
  303.                                                             <div class="align-items-center justify-content-between">
  304.                                                                 <div class="media-body ms-2">
  305.                                                                     <div class="media-contact-name">
  306.                                                                         <span>Experienced</span>
  307.                                                                         <span></span>
  308.                                                                     </div>
  309.                                                                 </div>
  310.                                                             </div>
  311.                                                             <div class="ms-auto"> <i class="contact-status text-primary fe fe-user-plus"></i> </div>
  312.                                                         </a>
  313.                                                         <a href="#" class="d-flex align-items-center media">
  314.                                                             <div class="mb-0 me-2">
  315.                                                                 <div class="main-img-user online">
  316.                                                                     <img alt="" src="{{absolute_url(asset('build/images/users/7.jpg'))}}"> <span>2</span>
  317.                                                                 </div>
  318.                                                             </div>
  319.                                                             <div class="align-items-center justify-content-between">
  320.                                                                 <div class="media-body ms-2">
  321.                                                                     <div class="media-contact-name">
  322.                                                                         <span>Freelancer</span>
  323.                                                                         <span></span>
  324.                                                                     </div>
  325.                                                                 </div>
  326.                                                             </div>
  327.                                                             <div class="ms-auto"> <i class="contact-status text-primary fe fe-user-plus"></i> </div>
  328.                                                         </a>
  329.                                                         <div class="text-center p-5">
  330.                                                             <a href="#" class="btn btn-outline-primary">Create New Group</a>
  331.                                                         </div>
  332.                                                     </div>
  333.                                                     <div class="tab-pane" id="ChatContacts">
  334.                                                         <div>
  335.                                                             <div class="py-4 px-6 fw-bold">A</div>
  336.                                                             <a href="#" class="d-flex align-items-center media">
  337.                                                                 <div class="mb-0 me-2">
  338.                                                                     <div class="main-img-user online">
  339.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/3.jpg'))}}"> <span>2</span>
  340.                                                                     </div>
  341.                                                                 </div>
  342.                                                                 <div class="align-items-center justify-content-between">
  343.                                                                     <div class="media-body ms-2">
  344.                                                                         <div class="media-contact-name">
  345.                                                                             <span>Anna Sthesia</span>
  346.                                                                             <span></span>
  347.                                                                         </div>
  348.                                                                         <div class="d-flex align-items-center">
  349.                                                                             <p class="text-muted fs-13">Home</p>
  350.                                                                         </div>
  351.                                                                     </div>
  352.                                                                 </div>
  353.                                                                 <div class="ms-auto">
  354.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  355.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  356.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  357.                                                                 </div>
  358.                                                             </a>
  359.                                                             <a href="#" class="d-flex align-items-center media">
  360.                                                                 <div class="mb-0 me-2">
  361.                                                                     <div class="main-img-user online">
  362.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/9.jpg'))}}"> <span>2</span>
  363.                                                                     </div>
  364.                                                                 </div>
  365.                                                                 <div class="align-items-center justify-content-between">
  366.                                                                     <div class="media-body ms-2">
  367.                                                                         <div class="media-contact-name">
  368.                                                                             <span>Abraham Clark</span>
  369.                                                                             <span></span>
  370.                                                                         </div>
  371.                                                                         <div class="d-flex align-items-center">
  372.                                                                             <p class="text-muted fs-13">Mobile</p>
  373.                                                                         </div>
  374.                                                                     </div>
  375.                                                                 </div>
  376.                                                                 <div class="ms-auto">
  377.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  378.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  379.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  380.                                                                 </div>
  381.                                                             </a>
  382.                                                             <a href="#" class="d-flex align-items-center media">
  383.                                                                 <div class="mb-0 me-2">
  384.                                                                     <div class="main-img-user online">
  385.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/4.jpg'))}}"> <span>2</span>
  386.                                                                     </div>
  387.                                                                 </div>
  388.                                                                 <div class="align-items-center justify-content-between">
  389.                                                                     <div class="media-body ms-2">
  390.                                                                         <div class="media-contact-name">
  391.                                                                             <span>Anderson</span>
  392.                                                                             <span></span>
  393.                                                                         </div>
  394.                                                                         <div class="d-flex align-items-center">
  395.                                                                             <p class="text-muted fs-13">Office</p>
  396.                                                                         </div>
  397.                                                                     </div>
  398.                                                                 </div>
  399.                                                                 <div class="ms-auto">
  400.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  401.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  402.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  403.                                                                 </div>
  404.                                                             </a>
  405.                                                         </div>
  406.                                                         <div class="mt-4">
  407.                                                             <div class="py-4 px-6 fw-bold">B</div>
  408.                                                             <a href="#" class="d-flex align-items-center media">
  409.                                                                 <div class="mb-0 me-2">
  410.                                                                     <div class="main-img-user online">
  411.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/5.jpg'))}}"> <span>2</span>
  412.                                                                     </div>
  413.                                                                 </div>
  414.                                                                 <div class="align-items-center justify-content-between">
  415.                                                                     <div class="media-body ms-2">
  416.                                                                         <div class="media-contact-name">
  417.                                                                             <span>Bernadette</span>
  418.                                                                             <span></span>
  419.                                                                         </div>
  420.                                                                         <div class="d-flex align-items-center">
  421.                                                                             <p class="text-muted fs-13">Mobile</p>
  422.                                                                         </div>
  423.                                                                     </div>
  424.                                                                 </div>
  425.                                                                 <div class="ms-auto">
  426.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  427.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  428.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  429.                                                                 </div>
  430.                                                             </a>
  431.                                                         </div>
  432.                                                         <div class="mt-4">
  433.                                                             <div class="py-4 px-6 fw-bold">C</div>
  434.                                                             <a href="#" class="d-flex align-items-center media">
  435.                                                                 <div class="mb-0 me-2">
  436.                                                                     <div class="main-img-user online">
  437.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/5.jpg'))}}"> <span>2</span>
  438.                                                                     </div>
  439.                                                                 </div>
  440.                                                                 <div class="align-items-center justify-content-between">
  441.                                                                     <div class="media-body ms-2">
  442.                                                                         <div class="media-contact-name">
  443.                                                                             <span>Cameron Watson</span>
  444.                                                                             <span></span>
  445.                                                                         </div>
  446.                                                                         <div class="d-flex align-items-center">
  447.                                                                             <p class="text-muted fs-13">Home</p>
  448.                                                                         </div>
  449.                                                                     </div>
  450.                                                                 </div>
  451.                                                                 <div class="ms-auto">
  452.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  453.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  454.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  455.                                                                 </div>
  456.                                                             </a>
  457.                                                             <a href="#" class="d-flex align-items-center media">
  458.                                                                 <div class="mb-0 me-2">
  459.                                                                     <div class="main-img-user online">
  460.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/20.jpg'))}}"> <span>2</span>
  461.                                                                     </div>
  462.                                                                 </div>
  463.                                                                 <div class="align-items-center justify-content-between">
  464.                                                                     <div class="media-body ms-2">
  465.                                                                         <div class="media-contact-name">
  466.                                                                             <span>Christopher Arnold</span>
  467.                                                                             <span></span>
  468.                                                                         </div>
  469.                                                                         <div class="d-flex align-items-center">
  470.                                                                             <p class="text-muted fs-13">Mobile</p>
  471.                                                                         </div>
  472.                                                                     </div>
  473.                                                                 </div>
  474.                                                                 <div class="ms-auto">
  475.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  476.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  477.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  478.                                                                 </div>
  479.                                                             </a>
  480.                                                             <a href="#" class="d-flex align-items-center media">
  481.                                                                 <div class="mb-0 me-2">
  482.                                                                     <div class="main-img-user online">
  483.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/2.jpg'))}}"> <span>2</span>
  484.                                                                     </div>
  485.                                                                 </div>
  486.                                                                 <div class="align-items-center justify-content-between">
  487.                                                                     <div class="media-body ms-2">
  488.                                                                         <div class="media-contact-name">
  489.                                                                             <span>Clarkson Gray</span>
  490.                                                                             <span></span>
  491.                                                                         </div>
  492.                                                                         <div class="d-flex align-items-center">
  493.                                                                             <p class="text-muted fs-13">Home</p>
  494.                                                                         </div>
  495.                                                                     </div>
  496.                                                                 </div>
  497.                                                                 <div class="ms-auto">
  498.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  499.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  500.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  501.                                                                 </div>
  502.                                                             </a>
  503.                                                         </div>
  504.                                                         <div class="mt-4">
  505.                                                             <div class="py-4 px-6 fw-bold">D</div>
  506.                                                             <a href="#" class="d-flex align-items-center media">
  507.                                                                 <div class="mb-0 me-2">
  508.                                                                     <div class="main-img-user online">
  509.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/7.jpg'))}}"> <span>2</span>
  510.                                                                     </div>
  511.                                                                 </div>
  512.                                                                 <div class="align-items-center justify-content-between">
  513.                                                                     <div class="media-body ms-2">
  514.                                                                         <div class="media-contact-name">
  515.                                                                             <span>Deirdre Short</span>
  516.                                                                             <span></span>
  517.                                                                         </div>
  518.                                                                         <div class="d-flex align-items-center">
  519.                                                                             <p class="text-muted fs-13">Home</p>
  520.                                                                         </div>
  521.                                                                     </div>
  522.                                                                 </div>
  523.                                                                 <div class="ms-auto">
  524.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  525.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  526.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  527.                                                                 </div>
  528.                                                             </a>
  529.                                                             <a href="#" class="d-flex align-items-center media">
  530.                                                                 <div class="mb-0 me-2">
  531.                                                                     <div class="main-img-user online">
  532.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/12.jpg'))}}"> <span>2</span>
  533.                                                                     </div>
  534.                                                                 </div>
  535.                                                                 <div class="align-items-center justify-content-between">
  536.                                                                     <div class="media-body ms-2">
  537.                                                                         <div class="media-contact-name">
  538.                                                                             <span>Dylan Gill</span>
  539.                                                                             <span></span>
  540.                                                                         </div>
  541.                                                                         <div class="d-flex align-items-center">
  542.                                                                             <p class="text-muted fs-13">Mobile</p>
  543.                                                                         </div>
  544.                                                                     </div>
  545.                                                                 </div>
  546.                                                                 <div class="ms-auto">
  547.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  548.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  549.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  550.                                                                 </div>
  551.                                                             </a>
  552.                                                             <a href="#" class="d-flex align-items-center media">
  553.                                                                 <div class="mb-0 me-2">
  554.                                                                     <div class="main-img-user online">
  555.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/1.jpg'))}}"> <span>2</span>
  556.                                                                     </div>
  557.                                                                 </div>
  558.                                                                 <div class="align-items-center justify-content-between">
  559.                                                                     <div class="media-body ms-2">
  560.                                                                         <div class="media-contact-name">
  561.                                                                             <span>Donna Davies</span>
  562.                                                                             <span></span>
  563.                                                                         </div>
  564.                                                                         <div class="d-flex align-items-center">
  565.                                                                             <p class="text-muted fs-13">Office</p>
  566.                                                                         </div>
  567.                                                                     </div>
  568.                                                                 </div>
  569.                                                                 <div class="ms-auto">
  570.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  571.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  572.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  573.                                                                 </div>
  574.                                                             </a>
  575.                                                         </div>
  576.                                                         <div class="mt-4">
  577.                                                             <div class="py-4 px-6 fw-bold">E</div>
  578.                                                             <a href="#" class="d-flex align-items-center media">
  579.                                                                 <div class="mb-0 me-2">
  580.                                                                     <div class="main-img-user online">
  581.                                                                         <img alt="" src="{{absolute_url(asset('build/images/users/4.jpg'))}}"> <span>2</span>
  582.                                                                     </div>
  583.                                                                 </div>
  584.                                                                 <div class="align-items-center justify-content-between">
  585.                                                                     <div class="media-body ms-2">
  586.                                                                         <div class="media-contact-name">
  587.                                                                             <span>Elizabeth Scott</span>
  588.                                                                             <span></span>
  589.                                                                         </div>
  590.                                                                         <div class="d-flex align-items-center">
  591.                                                                             <p class="text-muted fs-13">Office</p>
  592.                                                                         </div>
  593.                                                                     </div>
  594.                                                                 </div>
  595.                                                                 <div class="ms-auto">
  596.                                                                     <i class="contact-status text-primary fe fe-message-square me-2"></i>
  597.                                                                     <i class="contact-status text-success fe fe-phone-call me-2"></i>
  598.                                                                     <i class="contact-status text-danger fe fe-video me-2"></i>
  599.                                                                 </div>
  600.                                                             </a>
  601.                                                         </div>
  602.                                                     </div>
  603.                                                     <div class="tab-pane" id="ChatContacts1">
  604.                                                         <div>
  605.                                                             <div class="d-flex py-4 px-6 fw-bold"><span>Networks</span>
  606.                                                                 <a class="ms-auto"><i class="fe fe-plus"></i></a>
  607.                                                             </div>
  608.                                                             <a href="#" class="align-items-center media">
  609.                                                                 <div class="align-items-center justify-content-between">
  610.                                                                     <div class="media-body ms-4">
  611.                                                                         <div class="media-contact-name">
  612.                                                                             <span>Work</span>
  613.                                                                             <span></span>
  614.                                                                         </div>
  615.                                                                     </div>
  616.                                                                 </div>
  617.                                                             </a>
  618.                                                             <a href="#" class="align-items-center media">
  619.                                                                 <div class="align-items-center justify-content-between">
  620.                                                                     <div class="media-body ms-4">
  621.                                                                         <div class="media-contact-name">
  622.                                                                             <span>Freelancer</span>
  623.                                                                             <span></span>
  624.                                                                         </div>
  625.                                                                     </div>
  626.                                                                 </div>
  627.                                                             </a>
  628.                                                             <a href="#" class="align-items-center media">
  629.                                                                 <div class="align-items-center justify-content-between">
  630.                                                                     <div class="media-body ms-4">
  631.                                                                         <div class="media-contact-name">
  632.                                                                             <span>Personal</span>
  633.                                                                             <span></span>
  634.                                                                         </div>
  635.                                                                     </div>
  636.                                                                 </div>
  637.                                                             </a>
  638.                                                         </div>
  639.                                                         <div>
  640.                                                             <div class="d-flex py-4 px-6 fw-bold"><span>Rooms</span>
  641.                                                                 <a class="ms-auto"><i class="fe fe-plus"></i></a>
  642.                                                             </div>
  643.                                                             <a href="#" class="align-items-center media">
  644.                                                                 <div class="align-items-center justify-content-between">
  645.                                                                     <div class="media-body ms-4">
  646.                                                                         <div class="media-contact-name">
  647.                                                                             <span>Project Managers</span>
  648.                                                                             <span></span>
  649.                                                                         </div>
  650.                                                                     </div>
  651.                                                                 </div>
  652.                                                             </a>
  653.                                                             <a href="#" class="align-items-center media">
  654.                                                                 <div class="align-items-center justify-content-between">
  655.                                                                     <div class="media-body ms-4">
  656.                                                                         <div class="media-contact-name">
  657.                                                                             <span>Designers</span>
  658.                                                                             <span></span>
  659.                                                                         </div>
  660.                                                                     </div>
  661.                                                                 </div>
  662.                                                             </a>
  663.                                                             <a href="#" class="align-items-center media">
  664.                                                                 <div class="align-items-center justify-content-between">
  665.                                                                     <div class="media-body ms-4">
  666.                                                                         <div class="media-contact-name">
  667.                                                                             <span>Developers</span>
  668.                                                                             <span></span>
  669.                                                                         </div>
  670.                                                                     </div>
  671.                                                                 </div>
  672.                                                             </a>
  673.                                                         </div>
  674.                                                         <div>
  675.                                                             <div class="d-flex py-4 px-6 fw-bold"><span>On Hand Talk</span>
  676.                                                                 <a class="ms-auto"><i class="fe fe-plus"></i></a>
  677.                                                             </div>
  678.                                                         </div>
  679.                                                     </div>
  680.                                                 </div>
  681.                                                 <!-- main-chat-list -->
  682.                                             </div>
  683.                                         </div>
  684.                                     </div>
  685.                                 </div>
  686.                                 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-5">
  687.                                     <div class="card">
  688.                                         <div class="main-content-app pt-0">
  689.                                             <div class="main-content-body main-content-body-chat h-100">
  690.                                                 <div class="main-chat-header pt-3 d-block d-sm-flex">
  691.                                                     <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/1.jpg'))}}"></div>
  692.                                                     <div class="main-chat-msg-name mt-2">
  693.                                                         <p class="mb-0">Saul Goodmate</p>
  694.                                                         <span class="dot-label bg-success"></span><small class="me-3">online</small>
  695.                                                     </div>
  696.                                                     <nav class="nav">
  697.                                                         <div>
  698.                                                             <div class="input-group">
  699.                                                                 <input type="text" class="form-control" placeholder="Search">
  700.                                                                 <button class="btn ripple btn-primary input-group-text text-white border-0" type="button"><i class="fe fe-search"></i></button>
  701.                                                             </div>
  702.                                                         </div>
  703.                                                     </nav>
  704.                                                 </div>
  705.                                                 <!-- main-chat-header -->
  706.                                                 <div class="main-chat-body flex-2" id="ChatBody">
  707.                                                     <div class="content-inner">
  708.                                                         <label class="main-chat-time"><span>2 days ago</span></label>
  709.                                                         <div class="media flex-row-reverse chat-right">
  710.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/20.jpg'))}}"></div>
  711.                                                             <div class="media-body">
  712.                                                                 <div class="main-msg-wrapper">
  713.                                                                     Nulla consequat massa quis enim. Donec pede justo, fringilla vel...
  714.                                                                 </div>
  715.                                                                 <div class="main-msg-wrapper">
  716.                                                                     rhoncus ut, imperdiet a, venenatis vitae, justo...
  717.                                                                 </div>
  718.                                                                 <div>
  719.                                                                     <span>9:48 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  720.                                                                 </div>
  721.                                                             </div>
  722.                                                         </div>
  723.                                                         <div class="media chat-left">
  724.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/1.jpg'))}}"></div>
  725.                                                             <div class="media-body">
  726.                                                                 <div class="main-msg-wrapper">
  727.                                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  728.                                                                 </div>
  729.                                                                 <div>
  730.                                                                     <span>9:32 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  731.                                                                 </div>
  732.                                                             </div>
  733.                                                         </div>
  734.                                                         <div class="media flex-row-reverse chat-right">
  735.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/20.jpg'))}}"></div>
  736.                                                             <div class="media-body">
  737.                                                                 <div class="main-msg-wrapper">
  738.                                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
  739.                                                                 </div>
  740.                                                                 <div class="main-msg-wrapper">
  741.                                                                     <span class="text-dark"><span><i class="fa fa-image fs-13 text-muted px-3"></i></span><span class="fs-13 mt-1"> Image_attach.jpg </span>
  742.                                                                     <i class="fe fe-download mt-3 ms-4 text-muted pe-2"></i>
  743.                                                                     </span>
  744.                                                                 </div>
  745.                                                                 <div>
  746.                                                                     <span>11:22 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  747.                                                                 </div>
  748.                                                             </div>
  749.                                                         </div>
  750.                                                         <label class="main-chat-time"><span>Yesterday</span></label>
  751.                                                         <div class="media chat-left">
  752.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/1.jpg'))}}"></div>
  753.                                                             <div class="media-body">
  754.                                                                 <div class="main-msg-wrapper">
  755.                                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  756.                                                                 </div>
  757.                                                                 <div>
  758.                                                                     <span>9:32 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  759.                                                                 </div>
  760.                                                             </div>
  761.                                                         </div>
  762.                                                         <div class="media flex-row-reverse chat-right">
  763.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/20.jpg'))}}"></div>
  764.                                                             <div class="media-body">
  765.                                                                 <div class="main-msg-wrapper">
  766.                                                                     Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
  767.                                                                 </div>
  768.                                                                 <div class="main-msg-wrapper">
  769.                                                                     Nullam dictum felis eu pede mollis pretium
  770.                                                                 </div>
  771.                                                                 <div>
  772.                                                                     <span>9:48 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  773.                                                                 </div>
  774.                                                             </div>
  775.                                                         </div><label class="main-chat-time"><span>Today</span></label>
  776.                                                         <div class="media chat-left">
  777.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/1.jpg'))}}"></div>
  778.                                                             <div class="media-body">
  779.                                                                 <div class="main-msg-wrapper">
  780.                                                                     Maecenas tempus, tellus eget condimentum rhoncus
  781.                                                                 </div>
  782.                                                                 <div class="main-msg-wrapper">
  783.                                                                     <img alt="avatar" class="w-10 h-10" src="{{absolute_url(asset('build/images/media/3.jpg'))}}">
  784.                                                                     <img alt="avatar" class="w-10 h-10" src="{{absolute_url(asset('build/images/media/4.jpg'))}}">
  785.                                                                     <img alt="avatar" class="w-10 h-10" src="{{absolute_url(asset('build/images/media/5.jpg'))}}">
  786.                                                                 </div>
  787.                                                                 <div>
  788.                                                                     <span>10:12 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  789.                                                                 </div>
  790.                                                             </div>
  791.                                                         </div>
  792.                                                         <div class="media flex-row-reverse chat-right">
  793.                                                             <div class="main-img-user online"><img alt="avatar" src="{{absolute_url(asset('build/images/users/20.jpg'))}}"></div>
  794.                                                             <div class="media-body">
  795.                                                                 <div class="main-msg-wrapper">
  796.                                                                     Maecenas tempus, tellus eget condimentum rhoncus
  797.                                                                 </div>
  798.                                                                 <div class="main-msg-wrapper">
  799.                                                                     Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
  800.                                                                 </div>
  801.                                                                 <div>
  802.                                                                     <span>09:40 am</span> <a href="javascript:void(0)"><i class="icon ion-android-more-vertical"></i></a>
  803.                                                                 </div>
  804.                                                             </div>
  805.                                                         </div>
  806.                                                     </div>
  807.                                                 </div>
  808.                                                 <div class="main-chat-footer pt-5">
  809.                                                     <input class="form-control" placeholder="Type your message here..." type="text">
  810.                                                     <a class="nav-link" href="javascript:void(0)"><i class="fe fe-paperclip"></i></a>
  811.                                                     <button type="button" class="btn btn-icon  btn-primary brround"><i class="fa fa-paper-plane-o"></i></button>
  812.                                                     <nav class="nav">
  813.                                                     </nav>
  814.                                                 </div>
  815.                                             </div>
  816.                                         </div>
  817.                                     </div>
  818.                                 </div>
  819.                                 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
  820.                                     <div class="card">
  821.                                         <div class="card-body profile-details-main pb-0">
  822.                                             <div class="main-content-app">
  823.                                                 <nav class="nav float-end">
  824.                                                     <div class="dropdown">
  825.                                                         <a class="nav-link text-muted fs-20 p-0 ps-3" href="javascript:void(0)" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
  826.                                                         <div class="dropdown-menu dropdown-menu-start">
  827.                                                             <a class="dropdown-item" href="#"><i class="fe fe-user me-1"></i> Profile</a>
  828.                                                             <a class="dropdown-item" href="#"><i class="fe fe-edit me-1"></i> Edit</a>
  829.                                                             <a class="dropdown-item" href="#"><i class="fe fe-users me-1"></i> New Group</a>
  830.                                                             <a class="dropdown-item" href="#"><i class="fe fe-settings me-1"></i> Settings</a>
  831.                                                             <a class="dropdown-item" href="#"><i class="fe fe-trash-2 me-1"></i> Delete</a>
  832.                                                         </div>
  833.                                                     </div>
  834.                                                 </nav>
  836.                                                 <div class="text-center chat-image p-4 pb-0 mb-4 br-5">
  837.                                                     <div class="rounded-circle chat-profile">
  838.                                                         <a class="rounded-circle" href="{{ absolute_url(path('app_profile')) }}"><img alt="profile-avatar" src="{{absolute_url(asset('build/images/users/1.jpg'))}}" class="avatar avatar-xl rounded-circle"></a>
  839.                                                     </div>
  840.                                                     <div class="main-chat-msg-name">
  841.                                                         <a href="{{ absolute_url(path('app_profile')) }}">
  842.                                                             <h5 class="mb-1 text-dark fw-semibold">Saul Goodmate</h5>
  843.                                                         </a>
  844.                                                         <span class="dot-label bg-success"></span><small class="me-3">Available</small>
  845.                                                         <p class="text-muted mt-0 mb-1 pt-0 fs-13">Senior Web Designer</p>
  846.                                                     </div>
  847.                                                 </div>
  848.                                                 <div>
  849.                                                     <h6 class="mb-3">Contact Details :</h6>
  850.                                                     <div class="d-flex mb-2">
  851.                                                         <div>
  852.                                                             <a class="nav-link border rounded-pill chat-profile me-2" href="javascript:void(0)"><i class="fe fe-mail"></i></a>
  853.                                                         </div>
  854.                                                         <div class="ms-2">
  855.                                                             <p class="fs-13 fw-semibold mb-0">Email</p>
  856.                                                             <p class="fs-12 text-muted">elenagilbert@spruko.com</p>
  857.                                                         </div>
  858.                                                     </div>
  859.                                                     <div class="d-flex mb-2 mt-2">
  860.                                                         <div>
  861.                                                             <a class="nav-link border rounded-pill chat-profile me-2" href="javascript:void(0)"><i class="fe fe-phone"></i></a>
  862.                                                         </div>
  863.                                                         <div class="ms-2">
  864.                                                             <p class="fs-13 fw-semibold mb-0">Phone</p>
  865.                                                             <p class="fs-12 text-muted">+773(11)-16-337.</p>
  866.                                                         </div>
  867.                                                     </div>
  868.                                                     <div class="d-flex mb-2 mt-2">
  869.                                                         <div>
  870.                                                             <a class="nav-link border rounded-pill chat-profile me-2" href="javascript:void(0)"><i class="fe fe-map-pin"></i></a>
  871.                                                         </div>
  872.                                                         <div class="ms-2">
  873.                                                             <p class="fs-13 fw-semibold mb-0">Address</p>
  874.                                                             <p class="fs-12 text-muted">2nd street,houston texas,united states.</p>
  875.                                                         </div>
  876.                                                     </div>
  877.                                                     <div class="d-flex mb-2 mt-2">
  878.                                                         <div>
  879.                                                             <a class="nav-link border rounded-pill chat-profile me-2" href="javascript:void(0)"><i class="fe fe-linkedin"></i></a>
  880.                                                         </div>
  881.                                                         <div class="ms-2">
  882.                                                             <p class="fs-13 fw-semibold mb-0">Linkedin</p>
  883.                                                             <p class="fs-12 text-muted">@895434</p>
  884.                                                         </div>
  885.                                                     </div>
  886.                                                 </div>
  887.                                                 <div>
  888.                                                     <h6 class="mt-5 mb-0">Shared Files :</h6>
  889.                                                     <div class="border-0 p-0 mb-4 pt-4">
  890.                                                         <div class="d-flex align-items-center">
  891.                                                             <div class="ps-0 me-3"><i class="fa fa-folder-open shared-files text-muted"></i></div>
  892.                                                             <div class="d-block w-100">
  893.                                                                 <div class="d-flex align-items-center">
  894.                                                                     <div class="mt-0">
  895.                                                                         <h5 class="mb-1 fs-13 fw-semibold text-dark"> Demo_Document</h5>
  896.                                                                         <p class="mb-0 fs-13 text-muted">ppt<span class="fs-11 ms-2">1.2 mb</span></p>
  897.                                                                     </div>
  898.                                                                     <a href="javascript:void(0)" class="ms-auto fs-14 text-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Download"><i class="fe fe-download"></i></a>
  899.                                                                 </div>
  900.                                                             </div>
  901.                                                         </div>
  902.                                                     </div>
  903.                                                     <div class="border-0 p-0 mb-4">
  904.                                                         <div class="d-flex align-items-center">
  905.                                                             <div class="ps-0 me-3"><i class="fa fa-image shared-files text-muted"></i></div>
  906.                                                             <div class="d-block w-100">
  907.                                                                 <div class="d-flex align-items-center">
  908.                                                                     <div class="mt-0">
  909.                                                                         <h5 class="mb-1 fs-13 fw-semibold text-dark">Image_attachment</h5>
  910.                                                                         <p class="mb-0 fs-13 text-muted">img<span class="fs-11 ms-2">12 mb</span></p>
  911.                                                                     </div>
  912.                                                                     <a href="javascript:void(0)" class="ms-auto fs-14 text-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Download"><i class="fe fe-download"></i></a>
  913.                                                                 </div>
  914.                                                             </div>
  915.                                                         </div>
  916.                                                     </div>
  917.                                                     <div class="border-0 p-0 mb-0">
  918.                                                         <div class="d-flex align-items-center">
  919.                                                             <div class="ps-0 me-3"><i class="fa fa-envelope shared-files text-muted"></i></div>
  920.                                                             <div class="d-block w-100">
  921.                                                                 <div class="d-flex align-items-center">
  922.                                                                     <div class="mt-0">
  923.                                                                         <h5 class="mb-1 fs-13 fw-semibold text-dark"> Video_attachment</h5>
  924.                                                                         <p class="mb-0 fs-13 text-muted">Video<span class="fs-12 ms-2">16 mb</span></p>
  925.                                                                     </div>
  926.                                                                     <a href="javascript:void(0)" class="ms-auto fs-14 text-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Download"><i class="fe fe-download"></i></a>
  927.                                                                 </div>
  928.                                                             </div>
  929.                                                         </div>
  930.                                                     </div>
  931.                                                 </div>
  932.                                                 <div>
  933.                                                     <h5 class="mb-3 pt-5">Media :</h5>
  934.                                                     <div class="row row-sm chat-media">
  935.                                                         <div class="col-xl-4 col-lg-2 col-md-3 col-4">
  936.                                                             <div class="card custom-card border br-5">
  937.                                                                 <img src="{{absolute_url(asset('build/images/files/doc.png'))}}" alt="img" class="br-5">
  938.                                                             </div>
  939.                                                         </div>
  940.                                                         <div class="col-xl-4 col-lg-2 col-md-3 col-4">
  941.                                                             <div class="card custom-card border br-5">
  942.                                                                 <img src="{{absolute_url(asset('build/images/files/file.png'))}}" alt="img" class="br-5">
  943.                                                             </div>
  944.                                                         </div>
  945.                                                         <div class="col-xl-4 col-lg-2 col-md-3 col-4">
  946.                                                             <div class="card custom-card border br-5">
  947.                                                                 <img src="{{absolute_url(asset('build/images/files/image.png'))}}" alt="img" class="br-5">
  948.                                                             </div>
  949.                                                         </div>
  950.                                                         <div class="col-xl-4 col-lg-2 col-md-3 col-4">
  951.                                                             <div class="card custom-card border br-5">
  952.                                                                 <img src="{{absolute_url(asset('build/images/files/ppt.png'))}}" alt="img" class="br-5">
  953.                                                             </div>
  954.                                                         </div>
  955.                                                         <div class="col-xl-4 col-lg-2 col-md-3 col-4">
  956.                                                             <div class="card custom-card border br-5">
  957.                                                                 <img src="{{absolute_url(asset('build/images/files/word.png'))}}" alt="img" class="br-5">
  958.                                                             </div>
  959.                                                         </div>
  960.                                                         <div class="col-xl-4 col-lg-2 col-md-3 col-4">
  961.                                                             <div class="card custom-card border br-5">
  962.                                                                 <img src="{{absolute_url(asset('build/images/files/zip.png'))}}" alt="img" class="br-5">
  963.                                                             </div>
  964.                                                         </div>
  965.                                                     </div>
  966.                                                 </div>
  967.                                             </div>
  968.                                         </div>
  970.                                     </div>
  971.                                 </div>
  972.                             </div>
  973.                             <!-- END ROW -->
  974. {% endblock %}
  976. {% block javascripts %}
  977.    {{parent()}} 
  978.    <!--- TABS JS -->
  979.    <script src="{{absolute_url(asset('build/plugins/tabs/jquery.multipurpose_tabcontent.js'))}}"></script>
  980.    <script src="{{absolute_url(asset('build/plugins/tabs/tab-content.js'))}}"></script>
  982.     <!-- Internal Chat js-->
  983.      {{ encore_entry_script_tags('js/chat') }}
  985. {% endblock %}
  987.