<div ng-controller="DashboardMapCtrl as vm">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="col-xlg-3 col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="toolbar">
          <div class="filter-container">
            <div class="link-group"> <a  class="link active"  href="#"><i class="fa fa-map-o"></i>Map</a> <a class="link" href="#"><i class="fa fa-list"></i>List</a> </div>
            <div class="right-filter">
              <div class="dropdown"> <a href='' title='' class="btn-filter" dropdown-menu="ddSelectOptions" dropdown-model="ddSelectSelected" dropdown-item-label="text"> <i class="fa fa-filter"></i> Last Updated </a> </div>
              <div class="dropdown"> <a href="" title="" class="btn-filter ng-isolate-scope" ng-click="toggle()"> <i class="fa fa-filter"></i> Filters </a> </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 pull-right">
              <div pageslide ps-open="checked">
                <div style="padding:20px" id="demo-right"> //template for display all users
                  <div class="content">
                    <div class="search-bar">
                      <input type="search" ng-model="q" placeholder="filter people..." class="search-input">
                    </div>
                    <h3 class="nav-list__header">People</h3>
                    <div class="nav-list scroll">
                      <ul class="nav-list__container">
                        <li ng-repeat="people in peoples | filter:q"  
            class="nav-list__item"> <a  href="#/view/{{people.name}}" ng-click="next()" class="next"> {{$index+1}}. {{people.name}} </a> </li>
                      </ul>
                    </div>
                  </div>
                  <h2>Hello Pageslide</h2>
                  <p>Put here whatever you want</p>
                  <div class="date-picker-map">
                    <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
                           ng-model="date" required/>
                  </div>
                  <a ng-click="toggle()" class="button" >Close</a> </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chartjs-canvas-holder-first-row">
          <canvas id="doughnut" chart-options="options" height="100" width="100" class="chart chart-doughnut"
                        chart-data="data" chart-labels="labels" chart-click="changeData"> </canvas>
        </div>
        <div class="feed-panel-home"
       ba-panel
    
       ba-panel-class="medium-panel with-scroll feed-panel">
          <div class="feed-messages-container" track-width="smallContainerWidth" min-width="360" >
            <div class="feed-message" ng-repeat="message in feed" ng-click="expandMessage(message)">
              <div class="message-icon" ng-if="message.type == 'text-message'"> <img class="photo-icon" ng-src="{{::( message.author | profilePicture )}}"> </div>
              <div class="message-icon" ng-if="message.type != 'text-message'"> <img class="photo-icon" ng-src="{{::( message.author | profilePicture )}}"> </div>
              <div class="text-block text-message">
                <div class="message-header"> <span class="author">{{ ::message.author }} {{ ::message.surname}}</span> <span class="ago-time"> {{::message.ago}} </span><span class="sub-photo-icon" ng-class="::message.type"></span> </div>
                <div class="message-content line-clamp" ng-class="{'line-clamp-2' : !message.expanded}"> <span ng-if="message.preview">{{message.header}} </span>{{::message.text}} </div>
                <div class="preview" ng-show="message.expanded" ng-if="message.preview"> <a href="{{::message.link}}" target="_blank"> <img ng-src="{{ ::( message.preview | appImage )}}"> </a> </div>
                <div ng-show="message.expanded" class="message-time">
                  <div class="post-time"> {{::message.time}} </div>
                  <div class="ago-time"> {{::message.ago}} </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xlg-9 col-lg-9 col-md-9 col-sm-12">
        <div class="mapContainer">
          <leaflet lf-center="center" markers="markers" layers="layers" width="100%" height="100%"></leaflet>
        </div>
      </div>
    </div>
  </div>
</div>
