<div class="container">
	<div class="row">
		<div class="col-sm-2">
			<ul class="list-group">
				<li class="list-group-item animate" ng-repeat="date in dates" ng-class="{'active':date.ind==date_param}">
					<a ng-if="date.ind!=date_param" ng-click="getDatePage(date.ind, 1)">{{date.dtime | date: 'EEE. MMM. d yyyy'}}</a>
					<span ng-if="date.ind==date_param">{{date.dtime | date: 'EEE. MMM. d yyyy'}}</span>
				</li>
			</ul>
		</div>
		<div class="col-sm-10">
			<div style="text-align:center;">
				<dir-pagination-controls on-page-change="getDatePage(date_param, newPageNumber)" max-size="15"></dir-pagination-controls>
			</div>

			<div class="row">
				<button class="btn btn-primary" ng-click="compareMultipleCards()">Compare Multiple Cards</button>
			</div>
			<div ng-if="loading" class="well">
				<h1>Loading Cards...</h1>
			</div>
			<div ng-if="!loading" class="table-responsive">
				<table class="table table-striped">
					<thead>
						<tr>
							<th></th>
							<th style="text-align:center;">Date</th>
							<!-- <th style="text-align:center;">Fillage</th> -->
							<th style="text-align:center;">Type</th>
							<th style="text-align:center;"></th>
						</tr>
					</thead>

					<tbody>
						<tr dir-paginate="card in cards | itemsPerPage:per_page" total-items="total" current-page="page_num">
							<td style="vertical-align: middle;text-align:center;"><input type="checkbox" ng-change="addCardToMultiple(card._id)" ng-model="checkStatus"></td>
							<td style="vertical-align: middle;text-align:center;"><a href="/#/cards/{{card._id}}">{{card.created_on | date: "medium"}}</td>
							<!-- <td style="vertical-align: middle;text-align:center;">{{card.Fillage_Percent | number: 2}} %</td> -->
							<td style="vertical-align: middle;text-align:center;"><h5><span class="label" ng-class="{'label-success':card.stroke_type=='Normal', 'label-primary': card.stroke_type=='Shutdown', 'label-danger': card.stroke_type=='Alarm', 'label-warning':card.stroke_type=='Low Fillage'}">{{card.stroke_type}}</span></h5></td>
							<td style="vertical-align: middle;text-align:center;"><a href="/api/csv_stroke/{{card._id}}" class="btn btn-primary active">Download CSV</a></td>
						</tr>

					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
