<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add a New Well Test...</h4>
            </div>
            <div class="modal-body">
                <div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
                <form>
					<h2>Actual Volumes</h2>
                    <div class="form-group">
                        <label for="volume_oil_actual">Volume Oil (BBL)</label>
                        <input type="number" ng-model="newWellTest.volume_oil_actual" class="form-control" id="volume_oil_actual" />
                    </div>
                    <div class="form-group">
                        <label for="volume_h2o_actual">Volume Water (BBL)</label>
                        <input type="number" ng-model="newWellTest.volume_h2o_actual" class="form-control" id="volume_h2o_actual" />
                    </div>

					<div class="form-group">
                        <label for="volume_gas_actual">Volume Gas (MMCF)</label>
                        <input type="number" ng-model="newWellTest.volume_gas_actual" class="form-control" id="volume_gas_actual" />
                    </div>
					<hr />
					<h2>Projected Volumes</h2>
					<div class="form-group">
                        <label for="volume_oil_projected">Volume Oil (BBL)</label>
                        <input type="number" ng-model="newWellTest.volume_oil_projected" class="form-control" id="volume_oil_projected" />
                    </div>
                    <div class="form-group">
                        <label for="volume_h2o_projected">Volume Water (BBL)</label>
                        <input type="number" ng-model="newWellTest.volume_h2o_projected" class="form-control" id="volume_h2o_projected" />
                    </div>

					<div class="form-group">
                        <label for="volume_gas_projected">Volume Gas (MMCF)</label>
                        <input type="number" ng-model="newWellTest.volume_gas_projected" class="form-control" id="volume_gas_projected" />
                    </div>
                    <hr />
					<h2>Fluid Parameters</h2>
					<div class="form-group">
                        <label for="api_gravity_oil">Oil API Gravity</label>
                        <input type="number" ng-model="newWellTest.api_gravity_oil" class="form-control" id="api_gravity_oil" />
                    </div>
                    <div class="form-group">
                        <label for="spc_gravity_h2o">Water Specific Gravity</label>
                        <input type="number" ng-model="newWellTest.spc_gravity_h2o" class="form-control" id="spc_gravity_h2o" />
                    </div>
					<hr />
					<div class="form-group">
						<label for="created_on">Test Start</label>
						<br />
						<quick-datepicker id="created_on" ng-model='newWellTest.created_on'></quick-datepicker>
					</div>
					<div class="form-group">
                        <label for="duration_hours">Test Duration (Hours)</label>
                        <input type="number" ng-model="newWellTest.duration_hours" class="form-control" id="duration_hours" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" ng-click="submitNewWellTest();" data-dismiss="modal">Submit Well Test</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit a Tag...</h4>
            </div>
            <div class="modal-body">
                <div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
				<form>
					<h2>Actual Volumes</h2>
                    <div class="form-group">
                        <label for="volume_oil_actual">Volume Oil (BBL)</label>
                        <input type="number" ng-model="editWellTest.volume_oil_actual" class="form-control" id="volume_oil_actual" />
                    </div>
                    <div class="form-group">
                        <label for="volume_h2o_actual">Volume Water (BBL)</label>
                        <input type="number" ng-model="editWellTest.volume_h2o_actual" class="form-control" id="volume_h2o_actual" />
                    </div>

					<div class="form-group">
                        <label for="volume_gas_actual">Volume Gas (MMCF)</label>
                        <input type="number" ng-model="editWellTest.volume_gas_actual" class="form-control" id="volume_gas_actual" />
                    </div>
					<hr />
					<h2>Projected Volumes</h2>
					<div class="form-group">
                        <label for="volume_oil_projected">Volume Oil (BBL)</label>
                        <input type="number" ng-model="editWellTest.volume_oil_projected" class="form-control" id="volume_oil_projected" />
                    </div>
                    <div class="form-group">
                        <label for="volume_h2o_projected">Volume Water (BBL)</label>
                        <input type="number" ng-model="editWellTest.volume_h2o_projected" class="form-control" id="volume_h2o_projected" />
                    </div>

					<div class="form-group">
                        <label for="volume_gas_projected">Volume Gas (MMCF)</label>
                        <input type="number" ng-model="editWellTest.volume_gas_projected" class="form-control" id="volume_gas_projected" />
                    </div>
                    <hr />
					<h2>Fluid Parameters</h2>
					<div class="form-group">
                        <label for="api_gravity_oil">Oil API Gravity</label>
                        <input type="number" ng-model="editWellTest.api_gravity_oil" class="form-control" id="api_gravity_oil" />
                    </div>
                    <div class="form-group">
                        <label for="spc_gravity_h2o">Water Specific Gravity</label>
                        <input type="number" ng-model="editWellTest.spc_gravity_h2o" class="form-control" id="spc_gravity_h2o" />
                    </div>
					<hr />
					<div class="form-group">
						<label for="created_on">Test Start</label>
						<br />
						<quick-datepicker id="created_on" ng-model='editWellTest.created_on'></quick-datepicker>
					</div>
					<div class="form-group">
                        <label for="duration_hours">Test Duration (Hours)</label>
                        <input type="number" ng-model="editWellTest.duration_hours" class="form-control" id="duration_hours" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" ng-click="submitEditWellTest();" data-dismiss="modal">Submit Well Test Edits</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="deleteModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Are you sure?</h4>
            </div>
            <div class="modal-body">
                <div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
                <h3>Are you sure you want to delete the Well Test at {{deleteWellTest.created_on}}?</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">NO!!!!!!</button>
                <button type="button" class="btn btn-danger" ng-click="submitDeleteWellTest(deleteWellTest._id);" data-dismiss="modal">Yes, delete it!</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




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

		</div>
	</div>

	<div class='row'>
		<div class='col-md-12'>
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
				New Well Test
			</button>
    		<dir-pagination-controls on-page-change="loadWellTestData(newPageNumber)" max-size="15"></dir-pagination-controls>
			<div class="table-responsive">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Date</th>
							<th>Duration</th>
							<th>Volume Oil</th>
							<th>Volume Water</th>
							<th>Volume Gas</th>
							<th>Proj. Vol. Oil</th>
							<th>Proj. Vol. Water</th>
							<th>Proj. Vol. Gas</th>
							<th>API Grav. Oil</th>
							<th>Specific Grav. Water</th>
							<th></th>
							<th></th>

						</tr>
					</thead>
					<tbody>
						<tr dir-paginate="test in well_test_vals | itemsPerPage:per_page" total-items="total" current-page="page_num">
							<td nowrap>{{ test.created_on | date: 'medium' }}</td>
							<td nowrap>{{ test.duration_hours }} Hours</td>
							<td nowrap>{{ test.volume_oil_actual }} BBL</td>
							<td nowrap>{{ test.volume_h2o_actual }} BBL</td>
							<td nowrap>{{ test.volume_gas_actual }} mmcf</td>
							<td nowrap>{{ test.volume_oil_projected }} BBL</td>
							<td nowrap>{{ test.volume_h2o_projected }} BBL</td>
							<td nowrap>{{ test.volume_gas_projected }} mmcf</td>
							<td nowrap>{{ test.api_gravity_oil }}</td>
							<td nowrap>{{ test.spc_gravity_h2o }}</td>
							<td><button data-toggle="modal" data-target="#editModal" ng-click="startEditWellTest(test._id)" class="btn btn-primary">Edit</button></td>
							<td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteWellTest(test._id)" class="btn btn-danger">Delete</button></td>
						</tr>
					</tbody>
				</table>

				<div ng-if="well_test_vals.length==0" class="well" style="text-align:center">No stored tests yet.</div>
			</div>
		</div>
	</div>
</div>
