<div class='container'>
	<div class="row">
		<div class="col-md-12">
			<h1>Well History</h1>
		</div>
	</div>

    <div class='row'>
    	<div class='col-md-12'>
			<dir-pagination-controls on-page-change="loadGaugeOffData(newPageNumber)" max-size="15"></dir-pagination-controls>
			<div class="table-responsive">
	    		<table class="table table-striped">
	    			<thead>
	    				<tr>
	    					<th>Date</th>
	                        <th>% Run</th>
	    					<th>kWh</th>
	    					<th>kWh Regen</th>
	    					<th>Cost to Operate</th>
	    					<th>Lifting Cost</th>
	    					<th>Peak Load</th>
	    					<th>Min. Load</th>
	    					<th>Average SPM</th>
	    					<th>Calc. Production</th>
	    					<th>Polished Rod HP</th>
	    					<th>Fluid Level</th>
	    					<th>Pump Intake Pressure</th>
	    					<th>Inflow Rate</th>
	                    </tr>
	    			</thead>
	    			<tbody>
	                    <tr dir-paginate="entry in gauge_off_vals | itemsPerPage:per_page" total-items="total" current-page="page_num">
	    					<td nowrap>{{ entry.created_on | date: 'medium'}}</td>
	                        <td nowrap>{{ entry.percent_run | number: 1 }} %</td>
	                        <td nowrap>{{ entry.kWh_used_total | number: 2 }} kWh</td>
	    					<td nowrap>{{ entry.kWh_regen_total | number: 2 }} kWh</td>
	                        <td nowrap>${{ entry.electricity_cost_total | number: 2 }}</td>
	    					<td nowrap>${{ entry.lifting_cost_average | number: 2 }}</td>
	                        <td nowrap>{{ entry.peak_pr_load | number: 2 }} lbs</td>
	    					<td nowrap>{{ entry.min_pr_load | number: 2 }} lbs</td>
	    					<td nowrap>{{ entry.spm_average | number: 3 }} SPM</td>
	    					<td nowrap>{{ entry.production_total | number: 1 }} BBL</td>
	    					<td nowrap>{{ entry.polished_rod_hp_average | number: 2 }} HP</td>
	    					<td nowrap>{{ entry.fluid_level_average | number: 1 }} ft.</td>
	    					<td nowrap>{{ entry.pump_intake_pressure_average | number: 1 }} PSI</td>
	    					<td nowrap>{{ entry.inflow_rate_average | number: 1 }} BBL/hr</td>
	    				</tr>
	                </tbody>
	            </table>
				<div ng-if="gauge_off_vals.length==0" class="well" style="text-align:center">No stored data yet.</div>
			</div>
        </div>
    </div>
	<div class="row">
		<div class="col-md-12">
			<h1>Stroke Data</h1>
			<div class="tagChart" style="height:400px;">
				<linechart data="graphData" options="stroke_options"></linechart>
			</div>
		</div>

		<div class="col-md-12">
			<h1>Monetary Data</h1>
			<div class="tagChart" style="height:400px;">
				<linechart data="graphData" options="monetary_options"></linechart>
			</div>
		</div>

		<div class="col-md-12">
			<h1>Energy Data</h1>
			<div class="tagChart" style="height:400px;">
				<linechart data="graphData" options="energy_options"></linechart>
			</div>
		</div>

		<div class="col-md-12">
			<h1>Load Data</h1>
			<div class="tagChart" style="height:400px;">
				<linechart data="graphData" options="load_options"></linechart>
			</div>
		</div>

		<div class="col-md-12">
			<h1>Other Data</h1>
			<div class="tagChart" style="height:400px;">
				<linechart data="graphData" options="other_options"></linechart>
			</div>
		</div>
	</div>
</div>
