<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 ng-if="error" class="well"><h2>Error: {{error}}</h2></div>
                <div ng-if="!error">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="/#/card/{{_id}}/overview">Overview - Stroke {{stroke_number}}</a></li>
                        <li><a href="/api/csv_stroke/{{_id}}">CSV</a></li>
                    </ul>

                    <h5><a href="/#/cards/{{_id - 1}}" class="pull-left"><< Prev. Card</a> <a href="/#/cards/{{_id + 1}}" class="pull-right">Next Card >></a></h5>
                    <h1 style="text-align:center;">{{stroke_time | date: 'medium'}}</h1>


                    <div class="row">
                        <div class="col-sm-4">
                            <div id="Status" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Status:</h4><h3>{{stroke_type}}</h3><h6>at {{stroke_time | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="FillageGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Pump Fillage:</h4><h3>{{tagData['Pump Fill Percent'].value | number:3}} %</h3><h6>at {{tagData['Pump Fill Percent'].created_on | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="FAPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Fluid Above Pump:</h4><h3>{{tagData['Fluid Level'].value | number:3}} ft.</h3><h6>at {{tagData['Fluid Level'].created_on | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="PRHPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Polished Rod HP:</h4><h3>{{tagData['Polished Rod HP'].value | number:3}} HP</h3><h6>at {{tagData['Polished Rod HP'].created_on | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="PMPHPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Pump HP:</h4><h3>{{tagData['Downhole Pump HP'].value | number:3}} HP</h3><h6>at {{tagData['Downhole Pump HP'].created_on | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="SpeedGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Speed:</h4><h3>{{tagData['Stroke Speed'].value | number:3}} SPM</h3><h6>at {{tagData['Stroke Speed'].created_on | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="FluidLoadGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Fluid Load:</h4><h3>{{tagData['Fluid Load'].value | number:3}} lbs.</h3><h6>at {{tagData['Fluid Load'].created_on | date: "medium"}}</h6></div>
                        </div>
                        <div class="col-sm-4">
                            <div id="LastUpdated" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Current Stroke:</h4><h3>{{stroke_time | date: "medium"}}</h3></div>
                        </div>

                        <div class="col-sm-12">
                            <div class="progress" style="margin:10px;">
                              <div class="progress-bar progress-bar-striped active"
							  	id="surface_stroke_length"
								role="progressbar"
								aria-valuenow="{{ tagData['Surface Stroke Length'].value }}"
								aria-valuemin="{{ tagData['Surface Stroke Length'].min_expected }}"
								aria-valuemax="{{ tagData['Surface Stroke Length'].max_expected }}"
								style="width: {{ tagData['Surface Stroke Length'].percentage }}%;">
                                Surface Stroke Length: {{ tagData['Surface Stroke Length'].value | number:3 }} in.
                              </div>
                            </div>

                            <div class="progress" style="margin:10px;">
                              <div class="progress-bar progress-bar-striped active"
							  	id="downhole_gross_stroke"
								role="progressbar"
								aria-valuenow="{{ tagData['Downhole Gross Stroke'].value }}"
								aria-valuemin="{{ tagData['Downhole Gross Stroke'].min_expected }}"
								aria-valuemax="{{ tagData['Downhole Gross Stroke'].max_expected }}"
								style="width: {{ tagData['Downhole Gross Stroke'].percentage }}%;">
                                Downhole Gross Stroke: {{ tagData['Downhole Gross Stroke'].value | number:3 }} in.
                              </div>
                            </div>

                            <div class="progress" style="margin:10px;">
                              <div class="progress-bar progress-bar-striped active"
							  id="downhole_adjusted_gross_stroke"
							  role="progressbar"
							  aria-valuenow="{{ tagData['Downhole Adjusted Gross Stroke'].value }}"
							  aria-valuemin="{{ tagData['Downhole Adjusted Gross Stroke'].min_expected }}"
							  aria-valuemax="{{ tagData['Downhole Adjusted Gross Stroke'].max_expected }}"
							  style="width: {{ tagData['Downhole Adjusted Gross Stroke'].percentage }}%;">
                                Downhole Adjusted Gross Stroke: {{ tagData['Downhole Adjusted Gross Stroke'].value | number:3 }} in.
                              </div>
                            </div>

                            <div class="progress" style="margin:10px;">
                              <div class="progress-bar progress-bar-striped active"
							  id="downhole_net_stroke"
							  role="progressbar"
							  aria-valuenow="{{ tagData['Downhole Net Stroke'].value }}"
							  aria-valuemin="{{ tagData['Downhole Net Stroke'].min_expected }}"
							  aria-valuemax="{{ tagData['Downhole Net Stroke'].max_expected }}"
							  style="width: {{ tagData['Downhole Net Stroke'].percentage }}%;">
                                Downhole Net Stroke: {{ tagData['Downhole Net Stroke'].value | number:3 }} in.
                              </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <h1>Surface Card</h1>
							<div class="surfaceCard" 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" style="height:500px">
                            	<linechart data="card_graph_data" options="downholeOptions"></linechart>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div><!--col-sm-10-->
</div>
