<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="newBRTag.device_id" ng-options="d._id as device_label(d) for d in devices" class="form-control" id="data_source"></select>
                    </div>

                    <div class="form-group">
                        <label for="tag">Tag</label>
                        <input type="text" ng-model="newBRTag.tag" class="form-control" id="tag" placeholder="Tag Name Here">
                    </div>

                    <!-- <div class="form-group">
                        <label for="tag_type">Data Type</label>
                        <select ng-model="newBRTag.tag_type" ng-options="t for t in data_types" class="form-control" id="tag_type"></select>
                    </div>

                    <div class="form-group">
                        <label for="value">Value</label>
                        <input type="number" ng-model="newBRTag.value" class="form-control" id="value" placeholder="0">
                    </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="submitAddBRTag();" 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 {{editBRTag.device_id}}</label>
                        <select ng-model="editBRTag.device_id" ng-options="d._id as device_label(d) for d in devices" class="form-control" id="data_source"></select>
                    </div>
                    <div class="form-group">
                        <label for="tag">Tag Name</label>
                        <input type="text" ng-model="editBRTag.tag" class="form-control" id="tag" placeholder="Tag Name Here">
                    </div>
                    <div class="form-group">
                        <label for="tag_type">Data Type</label>
                        <select ng-model="editBRTag.tag_type" ng-options="t for t in data_types" class="form-control" id="tag_type"></select>
                    </div>
                    <div class="form-group">
                        <label for="value">Value</label>
                        <input type="number" ng-model="editBRTag.value" class="form-control" id="value" placeholder="0">
                    </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="submitEditBRTag();" 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 {{dBRTag.name}} ({{dBRTag.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="deleteBRTag(dBRTag._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">
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                            Add Tag
                        </button>
                        <button type="button" class="btn btn-warning" ng-click="backupBRTagsAll()">
                            Backup All Tags
                        </button>
                        <button type="button" class="btn btn-warning" ng-click="restoreBRTagsAll()">
                            Restore All Tags
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align:center;">
                        <dir-pagination-controls on-page-change="loadBRTagList(newPageNumber)" max-size="15"></dir-pagination-controls>
                    </div>
                </div>

                <table class="table">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Tag</td>
                            <td>Tag Type</td>
                            <td>Value</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr dir-paginate="tag in brTags | itemsPerPage:per_page" total-items="total" current-page="page_num">
                            <td>{{tag._id}}</td>
                            <td>{{tag.tag}}</td>
                            <td>{{tag.tag_type}}</td>
                            <td>{{tag.value}}</td>
                            <td><button data-toggle="modal" data-target="#editModal" ng-click="openEditBRTag(tag._id)" class="btn btn-primary">Edit</button></td>
                            <td><button data-toggle="modal" data-target="#deleteModal" ng-click="openDeleteBRTag(tag._id)" class="btn btn-danger">Delete</button></td>
                            <td><button  ng-click="backupBRTag(tag._id)" class="btn btn-warning">Back Up</button></td>
                            <td><button  ng-click="restoreBRTag(tag._id)" class="btn btn-warning">Restore</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
