<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 Tag...</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="data_source">Data Source</label>
                        <select ng-model="newTag.deviceID" ng-options="d as device_label(d) for d in devices track by d.id" class="form-control" id="data_source"></select>
                    </div>
                    <div class="form-group">
                        <label for="tag">Tag</label>
                        <input type="text" ng-model="newTag.tag" class="form-control" id="tag" placeholder="Tag Name Here">
                    </div>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" ng-model="newTag.name" class="form-control" id="name" placeholder="Vanity Name Here">
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <input type="textarea" ng-model="newTag.description" class="form-control" id="description" placeholder="Tag Description Here">
                    </div>
                    <div class="form-group">
                        <label for="data_type">Data Type</label>
                        <select ng-model="newTag.data_type" ng-options="t as t.data_type for t in data_types track by t.id" class="form-control" id="data_type"></select>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="minExpected">Minimum Value Expected</label>
                            <input type="number" ng-model="newTag.minExpected" class="form-control" id="minExpected" placeholder="0">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="maxExpected">Maximum Value Expected</label>
                            <input type="number" ng-model="newTag.maxExpected" class="form-control" id="maxExpected" placeholder="100">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="units">Units</label>
                            <input type="text" ng-model="newTag.units" class="form-control" id="units" placeholder="lbs, PSI, in, etc.">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="change_threshold">Change Threshold</label>
                            <input type="number" ng-model="newTag.change_threshold" class="form-control" id="change_threshold" placeholder="0">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="guarantee_sec">Guarantee Sec.</label>
                            <input type="number" ng-model="newTag.guarantee_sec" class="form-control" id="guarantee_sec" placeholder="3600">
                        </div>
                    </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="submitAddTag();" data-dismiss="modal">Add Tag</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>
                    <div class="form-group">
                        <label for="data_source">Data Source</label>
                        <select ng-model="editTag.deviceID" ng-options="d as device_label(d) for d in devices track by d.id" class="form-control" id="data_source"></select>
                    </div>
                    <div class="form-group">
                        <label for="tag">Tag Name</label>
                        <input type="text" ng-model="editTag.tag" class="form-control" id="tag" placeholder="Tag Name Here">
                    </div>
                    <div class="form-group">
                        <label for="name">Vanity Name</label>
                        <input type="text" ng-model="editTag.name" class="form-control" id="name" placeholder="Vanity Name Here">
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <input type="textarea" ng-model="editTag.description" class="form-control" id="description" placeholder="Tag Description Here">
                    </div>
                    <div class="form-group">
                        <label for="data_type">Data Type</label>
                        <select ng-model="editTag.data_type" ng-options="t as t.data_type for t in data_types track by t.id" class="form-control" id="data_type"></select>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="minExpected">Minimum Value Expected</label>
                            <input type="number" ng-model="editTag.minExpected" class="form-control" id="minExpected" placeholder="0">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="maxExpected">Maximum Value Expected</label>
                            <input type="number" ng-model="editTag.maxExpected" class="form-control" id="maxExpected" placeholder="100">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="units">Units</label>
                            <input type="text" ng-model="editTag.units" class="form-control" id="units" placeholder="lbs, PSI, in, etc.">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="change_threshold">Change Threshold</label>
                            <input type="number" ng-model="editTag.change_threshold" class="form-control" id="change_threshold" placeholder="0">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="guarantee_sec">Guarantee Sec.</label>
                            <input type="number" ng-model="editTag.guarantee_sec" class="form-control" id="guarantee_sec" placeholder="3600">
                        </div>
                    </div>
                </form>
                <pre>{{editTag}}</pre>
            </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="submitEditTag();" data-dismiss="modal">Submit Tag 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 tag {{dTag.name}} ({{dTag.tag}})?</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="deleteTag(dTag.id);" data-dismiss="modal">Heck yes, delete it!</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="clearTagDataModal">
    <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 data for tag {{dTagValues.name}} ({{dTagValues.tag}})?</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="deleteTagValues(dTagValues.id);" data-dismiss="modal">Heck yes, delete it!</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<div ng-if="loading" class="container">
	<div class="row">
		<div class="col-md-12 well" style="text-align:center;">
			<h1>Loading Tags..</h1>
			<img class="img-responsive" src="/images/loading.gif"  style="margin:0 auto;"/>
		</div>
	</div>
</div>

<div ng-if="!loading">
	<div ng-if="error" class="container">
		<div class="row">
			<div class="col-md=12">
				<h1>Error Caught!</h1>
				<pre>{{message}}</pre>
			</div>
		</div>
	</div>

	<div ng-if="!error" class="container">
		<div class="row">
			<div class="col-md-12">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                    Add Tag
                </button>
				<table class="table">
					<thead>
						<tr>
                            <td></td>
							<td>ID</td>
							<td>Name</td>
							<td>Min Expected Value</td>
							<td>Max Expected Value</td>
							<td>Units</td>
							<td></td>
                            <td></td>
							<td></td>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="tag in tags">
                            <td><input type="checkbox" ng-model="tag.selectedForPlot" ng-change="getPlotTags()"></input></td>
							<td>{{tag.id}}</td>
							<td><a href="/#/tag/{{tag.id}}">{{tag.name}}</a>  <i class="fa fa-info-circle" data-toggle="popover" title="{{tag.name}}" data-content="Tag Name: {{tag.tag}} </br>Details: {{tag.description}}<br/>Type: {{tag.data_type}}"></i></td>
							<td>{{tag.minExpected}}</td>
							<td>{{tag.maxExpected}}</td>
							<td>{{tag.units}}</td>
							<td><button data-toggle="modal" data-target="#editModal" ng-click="openEditTag(tag.id)" class="btn btn-primary">Edit</button></td>
                            <td><button data-toggle="modal" data-target="#clearTagDataModal" ng-click="openClearTagData(tag.id)" class="btn btn-primary">Clear Data</button></td>
							<td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteTag(tag.id)" class="btn btn-danger">Delete</button></td>
							<script>
								$(document).ready(function(){
								    $('[data-toggle="popover"]').popover({html: true});
								});
							</script>
						</tr>
					</tbody>
				</table>
                <a ng-if="tags_to_plot" class="btn btn-success" href="/#/tag/{{tags_to_plot}}">
                    Compare Tags
                </a>
			</div>
		</div>
	</div>
</div>
