<div class="row">
    <div class="col-md-12" style="margin-bottom: 10px;">
        <div style="float: right;margin-top: -04px;">
            <a type="button" style="" class="btn btn-primary btn editable-submit" href="#/aud/create" >
                            Create New Audience
            </a> 
        </div>
    </div>
    <div class="col-md-12" >
    <div class="panel panel-info" data-sortable-id="chart-js-6">
        <div class="panel-heading">
        <div style="width: 300px;">
            <div style="width: 166px; ">
                <h4 class="panel-title p-heading">Audience Segments</h4>
            </div>
        </div>
        </div>
        <div class="panel-body">            
          <table class="table table-striped" id="tblAudience">
                <thead>
                    <tr>
                        <th>Segment Name</th>
                        <th>Description</th>                            
                        <th>Range</th>
                        <th>Created On</th>
                        <th colspan="2"><input type="text" class="form-control" placeholder="Search Segment" ng-model="searchTerm" ng-change="startFrom=0;currentPage = 1;"></th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="segment in audienceSegments | filter :{name:searchTerm} |limitTo:pageSize:startFrom">
                        <td>{{segment.name}}</td>
                        <td>{{segment.description}}</td>
                        <td>{{segment.range}}</td>
                        <td>{{formatDate(segment.createdate)}}</td>
                        <td  style="text-align:right">
                            <a ng-if="segment.type!='system'" title="Edit" type="button" class="btn btn-primary btn-sm editable-submit" ng-href="#/aud/edit/{{segment._id}}">
                            <i class="fa fa-edit" ></i></a>
                        </td>
                        <td  style="text-align:right">
                            <button ng-if="segment.type!='system'" title="Delete" type="button" class="btn btn-danger btn-sm editable-submit" ng-click="deleteSegment(segment._id);">
                            <i class="fa fa-minus" ></i>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <button type="button" class="btn btn-primary btn-sm editable-submit" ng-disabled="currentPage == 1" ng-click="currentPage=currentPage-1;startFrom=startFrom-pageSize">
                               <i class="fa fa-2x fa-angle-double-left"></i>
                            </button>
                            <b>{{currentPage}}/{{numberOfPages()}}</b>
                             <button type="button" class="btn btn-primary btn-sm editable-submit" ng-disabled="currentPage >= audienceSegments.length/pageSize " ng-click="currentPage=currentPage+1;startFrom=startFrom+pageSize">
                                <i class="fa fa-2x fa-angle-double-right"></i>
                            </button> 
                        </td>
                        <td style="text-align:right">
                            <!--  <a type="button" class="btn btn-primary btn-sm editable-submit" href="#/aud/create" >
                                Create New
                            </a>  -->
                        </td>
                    </tr>
                    </button>
                </tbody>
            </table>
             

           
        </div>    
    </div>
    </div>
</div>
<!-- /* Enable word wrapping for cells in the "aud description" and "aud name" columns */ -->
<style>
   #tblAudience td:nth-child(1) {
    white-space: normal;
    word-wrap: break-word;
   }
   #tblAudience td:nth-child(2) {
   white-space: normal;
   word-wrap: break-word;
   }
</style>
