<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 Fluid Shot...</h4>
            </div>
            <div class="modal-body">
                <div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
                <form>
                    <div class="form-group">
                        <label for="pump_intake_pressure">Pump Intake Pressure</label>
                        <input type="number" ng-model="newFluidShot.pump_intake_pressure" class="form-control" id="pump_intake_pressure" />
                    </div>

					<div class="form-group">
						<label for="created_on">Shot Taken At</label>
						<br />
						<quick-datepicker id="created_on" ng-model='newFluidShot.created_on'></quick-datepicker>
					</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="submitNewFluidShot();" data-dismiss="modal">Submit Fluid Shot</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 Fluid Shot...</h4>
            </div>
            <div class="modal-body">
                <div class="well" ng-if="message"><h3 class="text-danger">{{message}}</h3></div>
				<form>
                    <div class="form-group">
                        <label for="pump_intake_pressure">Pump Intake Pressure</label>
                        <input type="number" ng-model="editFluidShot.pump_intake_pressure" class="form-control" id="pump_intake_pressure" />
                    </div>

					<div class="form-group">
						<label for="created_on">Shot Taken At</label>
						<br />
						<quick-datepicker id="created_on" ng-model='editFluidShot.created_on'></quick-datepicker>
					</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="submitEditFluidShot();" data-dismiss="modal">Submit Fluid Shot 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 Fluid Shot at {{deleteFluidShot.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="submitDeleteFluidShot(deleteFluidShot._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>Fluid Shot 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 Fluid Shot
			</button>
    		<dir-pagination-controls on-page-change="loadFluidShotData(newPageNumber)" max-size="15"></dir-pagination-controls>
			<div class="table-responsive">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Date</th>
							<th>Pump Intake Pressure</th>
							<th></th>
							<th></th>

						</tr>
					</thead>
					<tbody>
						<tr dir-paginate="shot in fluid_shots | itemsPerPage:per_page" total-items="total" current-page="page_num">
							<td nowrap>{{ shot.created_on | date: 'medium' }}</td>
							<td nowrap>{{ shot.pump_intake_pressure }} PSI</td>
							<td><button data-toggle="modal" data-target="#editModal" ng-click="startEditFluidShot(shot._id)" class="btn btn-primary">Edit</button></td>
							<td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteFluidShot(shot._id)" class="btn btn-danger">Delete</button></td>
						</tr>
					</tbody>
				</table>

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