<uib-tabset justified="true">
  <uib-tab id="users">
    <uib-tab-heading>
      <fa name="users"></fa>
    </uib-tab-heading>

    <h6><strong>Online</strong> Users</h6>

    <ul>

      <li class="online">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/ici-avatar.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Ing. Imrich <strong>Kamarel</strong></span>
            <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="online">
        <div class="media">

          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/arnold-avatar.jpg" alt>
          </a>
          <span class="badge bg-lightred unread">3</span>

          <div class="media-body">
            <span class="media-heading">Arnold <strong>Karlsberg</strong></span>
            <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
            <span class="badge badge-outline status"></span>
          </div>

        </div>
      </li>

      <li class="online">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/peter-avatar.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Peter <strong>Kay</strong></span>
            <small><i class="fa fa-map-marker"></i> Kosice, Slovakia</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="online">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/george-avatar.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">George <strong>McCain</strong></span>
            <small><i class="fa fa-map-marker"></i> Prague, Czech Republic</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="busy">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar1.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Lucius <strong>Cashmere</strong></span>
            <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="busy">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar2.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Jesse <strong>Phoenix</strong></span>
            <small><i class="fa fa-map-marker"></i> Berlin, Germany</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

    </ul>

    <h6><strong>Offline</strong> Users</h6>

    <ul>

      <li class="offline">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar4.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Dell <strong>MacApple</strong></span>
            <small><i class="fa fa-map-marker"></i> Paris, France</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="offline">
        <div class="media">

          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar5.jpg" alt>
          </a>

          <div class="media-body">
            <span class="media-heading">Roger <strong>Flopple</strong></span>
            <small><i class="fa fa-map-marker"></i> Rome, Italia</small>
            <span class="badge badge-outline status"></span>
          </div>

        </div>
      </li>

      <li class="offline">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar6.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Nico <strong>Vulture</strong></span>
            <small><i class="fa fa-map-marker"></i> Kyjev, Ukraine</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="offline">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar7.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Bobby <strong>Socks</strong></span>
            <small><i class="fa fa-map-marker"></i> Moscow, Russia</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="offline">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar8.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Anna <strong>Opichia</strong></span>
            <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

    </ul>
  </uib-tab>

  <uib-tab>
    <uib-tab-heading>
      <fa name="clock-o"></fa>
    </uib-tab-heading>

    <h6><strong>Chat</strong> History</h6>

    <ul>

      <li class="online">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/ici-avatar.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Ing. Imrich <strong>Kamarel</strong></span>
            <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="busy">
        <div class="media">

          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/arnold-avatar.jpg" alt>
          </a>
          <span class="badge bg-lightred unread">3</span>

          <div class="media-body">
            <span class="media-heading">Arnold <strong>Karlsberg</strong></span>
            <small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</small>
            <span class="badge badge-outline status"></span>
          </div>

        </div>
      </li>

      <li class="offline">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/peter-avatar.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Peter <strong>Kay</strong></span>
            <small>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit </small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

    </ul>
  </uib-tab>

  <uib-tab>
    <uib-tab-heading>
      <fa name="heart"></fa>
    </uib-tab-heading>

    <h6><strong>Friends</strong> List</h6>
    <ul>

      <li class="online">
        <div class="media">

          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/arnold-avatar.jpg" alt>
          </a>
          <span class="badge bg-lightred unread">3</span>

          <div class="media-body">
            <span class="media-heading">Arnold <strong>Karlsberg</strong></span>
            <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
            <span class="badge badge-outline status"></span>
          </div>

        </div>
      </li>

      <li class="offline">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar8.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Anna <strong>Opichia</strong></span>
            <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="busy">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/random-avatar1.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Lucius <strong>Cashmere</strong></span>
            <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

      <li class="online">
        <div class="media">
          <a class="pull-left thumb thumb-sm" href="javascript:;">
            <img class="media-object img-circle" src="images/ici-avatar.jpg" alt>
          </a>
          <div class="media-body">
            <span class="media-heading">Ing. Imrich <strong>Kamarel</strong></span>
            <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
            <span class="badge badge-outline status"></span>
          </div>
        </div>
      </li>

    </ul>
  </uib-tab>
  <uib-tab heading="Long Justified">
    <uib-tab-heading>
      <fa name="cog"></fa>
    </uib-tab-heading>

    <h6><strong>Chat</strong> Settings</h6>

    <ul class="settings">

      <li>
        <div class="form-group">
          <label class="col-xs-8 control-label">Show Offline Users</label>
          <div class="col-xs-4 control-label">
            <div class="onoffswitch greensea">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-offline" checked="">
              <label class="onoffswitch-label" for="show-offline">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="form-group">
          <label class="col-xs-8 control-label">Show Fullname</label>
          <div class="col-xs-4 control-label">
            <div class="onoffswitch greensea">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-fullname">
              <label class="onoffswitch-label" for="show-fullname">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="form-group">
          <label class="col-xs-8 control-label">History Enable</label>
          <div class="col-xs-4 control-label">
            <div class="onoffswitch greensea">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-history" checked="">
              <label class="onoffswitch-label" for="show-history">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="form-group">
          <label class="col-xs-8 control-label">Show Locations</label>
          <div class="col-xs-4 control-label">
            <div class="onoffswitch greensea">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-location" checked="">
              <label class="onoffswitch-label" for="show-location">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="form-group">
          <label class="col-xs-8 control-label">Notifications</label>
          <div class="col-xs-4 control-label">
            <div class="onoffswitch greensea">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-notifications">
              <label class="onoffswitch-label" for="show-notifications">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="form-group">
          <label class="col-xs-8 control-label">Show Undread Count</label>
          <div class="col-xs-4 control-label">
            <div class="onoffswitch greensea">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-unread" checked="">
              <label class="onoffswitch-label" for="show-unread">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

    </ul>
  </uib-tab>
</uib-tabset>
