<div id="jsxc-roster" class="jsxc-root-container">
   <div class="jsxc-contact-list-wrapper">
      <div class="jsxc-filter-wrapper">
         <i class="jsxc-icon-search jsxc-icon--center"></i>
         <input type='text' class="jsxc-filter-input" placeholder='{{t "contactfilter"}}' />
         <button class="jsxc-clear">
            <i class="jsxc-icon-close jsxc-icon--center"></i>
         </button>
      </div>

      <button class="jsxc-collapsible jsxc-active">{{t "groups"}}</button>
      <ul class="jsxc-group-list" data-empty-list-label="{{t "Your_group_list_is_empty"}}"
         data-offline-hidden-label="{{t "Offline_contacts_are_hidden"}}"
         data-presence-offline-label="{{t "You_are_currently_offline"}}"></ul>

      <button class="jsxc-collapsible jsxc-active">{{t "contacts"}}</button>
      <ul class="jsxc-contact-list" data-empty-list-label="{{t "Your_contact_list_is_empty"}}"
         data-offline-hidden-label="{{t "Offline_contacts_are_hidden"}}"
         data-presence-offline-label="{{t "You_are_currently_offline"}}"></ul>
   </div>
   <div class="jsxc-roster-status"></div>
   <div class="jsxc-bottom jsxc-presence jsxc-roster-item jsxc-bar" data-bid="own">
      <div class="jsxc-avatar jsxc-shrink--no"></div>

      <div class="jsxc-bar__caption jsxc-grow">
         <div class="jsxc-menu jsxc-menu--pushup jsxc-js-presence-menu">
            <div class="jsxc-menu__button">
               <div class="jsxc-bar__caption__primary">{{t "Offline"}}</div>
               <div class="jsxc-bar__caption__secondary"></div>
            </div>
            <div class="jsxc-menu__content">
               <ul>
                  <li data-presence="extended-status" class="jsxc-extended-status jsxc-icon-edit">{{t "extended-status"}}</li>
                  <li data-presence="online" class="jsxc-online jsxc-offline-available">{{t "Online"}}</li>
                  <li data-presence="chat" class="jsxc-chat">{{t "Chatty"}}</li>
                  <li data-presence="away" class="jsxc-away">{{t "Away"}}</li>
                  <li data-presence="xa" class="jsxc-xa">{{t "Extended_away"}}</li>
                  <li data-presence="dnd" class="jsxc-dnd">{{t "dnd"}}</li>
                  <li data-presence="offline" class="jsxc-offline">{{t "Offline"}}</li>
               </ul>
            </div>
         </div>
      </div>

      {{> menu classes="jsxc-menu--pushup jsxc-js-notice-menu" button-classes="jsxc-bounce"}}

      <div class="jsxc-menu jsxc-menu--pushup jsxc-js-main-menu">
         <div class="jsxc-menu__button jsxc-icon--clickable">
            <i class="jsxc-icon-menu jsxc-icon--center"></i>
         </div>
         <div class="jsxc-menu__content">
            <ul></ul>
         </div>
      </div>
   </div>
   <div class="jsxc-roster-toggle"></div>
</div>
