<div class="row">
	<form class="form-horizontal">
		<div class="form-group" style="width:50%;float:left;padding-left:24px;margin-bottom:0px;">
            <!-- begin page-header -->
			<h1 class="page-header">
				App Users	
			</h1> 
			<!-- end page-header -->
        </div>

        <!-- <label class="col-md-3 control-label">
            <span style="position: relative; font-size: 14px; right: 123px; top: 28px;">Platform </span>
        </label> -->

        <!-- platform filter code  -->
        <div class="form-group" style="width:300px;float:right;padding-right:500px;margin-bottom:0px;margin-top: -25px;">
            <div  style="position: relative; top: 32px; left: 0px; float: left; width: 50%; font-size: 14px;"> 
              Platform
            </div>

            <div  style="position: relative; top: 32px; left: 62px; float: left; width: 50%;"> 
                <select id="statsplatform" ng-model="val" ng-change="getDauWauMauPlatformFilter()">
                    <option value="all" selected>All</option>
                    <option value="Android">Android</option>
                    <option value="IOS">iOS</option>
                    <option value="Web">Web</option>
                </select>
             </div>

        </div>


		<div class="form-group" style="width:382px;float:right;padding-right:10px;margin-bottom:0px;">
            <label class="col-md-3 control-label" style="width:80px;"><span style="font-size: 14px;margin-left: 19px;padding-left: 4px;">Period</span></label>
            <div class="col-md-9">
                <div id="advance-daterange" class="btn btn-white advance-daterange-class" >
                    <span></span>
                    <i class="fa fa-angle-down fa-fw"></i>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- begin row -->
<div class="row">
    <!-- begin col-4 -->
    <div class="col-md-4 col-sm-6" id="installHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="">
        <div class="widget widget-stats bg-green">
            <div class="stats-icon stats-icon-lg">
                <img src="assets/img/users-widget.svg" alt="Users" />
            </div>
            <div class="stats-title">MAU</div>
            <table class="stats-number" style="margin-top: 15px;">
              <tr>
                <td>
                    <span id="lblNewInstalls" style="font-weight: 500;">{{MAU}}</span>
                </td>
            </table>
        </div>
    </div>
    <!-- end col-4 -->
    <!-- begin col-4 -->
    <div class="col-md-4 col-sm-6" id="userHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="">
        <div class="widget widget-stats bg-blue">
            <div class="stats-icon stats-icon-lg"><img src="assets/img/users-widget.svg" alt="Users" /></div>
            <div class="stats-title">Avg WAU</div>
            <table class="stats-number" style="margin-top: 15px;">
              <tr>
                <td class="wavy"><span style="font-weight: 500;">{{WAU}}</span></td>
              </tr>
            </table>
        </div>
    </div>
    <!-- end col-4 -->
    <!-- begin col-4 -->
    <div class="col-md-4 col-sm-6">
        <div class="widget widget-stats bg-purple">
            <div class="stats-icon stats-icon-lg"><img src="assets/img/users-widget.svg" alt="Users" /></div>
            <div class="stats-title">Avg DAU</div>
            <table class="stats-number" style="margin-top: 15px;">
              <tr><td><span style="font-weight: 500;">{{DAU}}</span></td>
              </tr>
            </table>
        </div>
    </div>
    <!-- end col-4 -->
</div>
<!-- end row -->

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-info">
            <div class="panel-heading ">                
                <div class="btn-group m-r-5 m-b-5 pull-right">
	                <button type="button" id="swiu" class="btn btn-white btn-xs">Active</button>
	                <button type="button" class="btn btn-white btn-xs dropdown-toggle" data-toggle="dropdown">
	                    <span class="caret"></span>
	                </button>
	                <ul class="dropdown-menu" role="menu">
	                    <li><a class="theme-select" data-attr="all">All</a></li>
	                    <li><a class="theme-select" data-attr="I">Active</a></li>
	                    <li><a class="theme-select" data-attr="U">InActive Users</a></li>
	                </ul>
	            </div>
	            <h4 class="panel-title p-heading">Users List</h4>
            </div>
             <div class="panel-body">
             	<div>
			       <style type="text/css">
			       		#tblUsers_wrapper{
			       			overflow: auto;
			       			padding-bottom: 25px;
			       		}
			       </style>
			        <!-- <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-striped table-bordered"></table> -->
			        <table class="table table-striped table-bordered" id="tblUsers">
				        <thead>
			        		<th>User</th>
			        		<th>User Since</th>
			        		<th>Last Seen</th>
			        		<th>#of Sessions</th>
		        			<!-- <th>Average Duration</th> Hide for now -->
                            <th>Customer ID</th>
			        	</thead>
				    </table>
		    	</div>
		    </div>
        </div>
	</div>
</div>
<style>
    a{
	  cursor: pointer;
	}
</style>
