<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==current_date}">
					<a ng-if="date.ind!=current_date" href="/#/cards/{{date.ind}}">{{date.dtime | date: 'EEE. MMM. d yyyy'}}</a>
					<span ng-if="date.ind==current_date">{{date.dtime | date: 'EEE. MMM. d yyyy'}}</span>
				</li>
			</ul>
		</div>
		<div class="col-sm-10 pull-right">
            <div ng-if="loading" class="well"><img src="/images/loading.gif" style="display: table-cell; vertical-align: middle"/></div>
			<div ng-if="!loading">
                <div class="row">
                    <div class="col-sm-12">
                        <h1>Surface Card</h1>
						<div class="surfaceCard tagChart" style="height:500px">
                        	<linechart data="card_graph_data" options="surfaceOptions"></linechart>
						</div>
                    </div>

                    <div class="col-sm-12">
                        <h1>Downhole Card</h1>
						<div class="downholeCard tagChart" style="height:500px">
                        	<linechart data="card_graph_data" options="downholeOptions"></linechart>
						</div>
                    </div>

					<div class="col-sm-12">
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr>
										<th>Date & Time</th>
										<th>Stroke Type</th>
										<th></th>
									</tr>
								</thead>

								<tbody>
									<tr ng-repeat="card in cards">
										<td>{{card.stroke_time | date: 'medium'}}</td>
										<td>{{card.stroke_type}}</td>
										<td><a href="/#/cards/{{card._id}}" class="btn btn-primary">View Card</a></td>
									</tr>
								</tbody>
							</table>
						</div>
                </div>
            </div>
        </div>
	</div>
</div>
