<section ng-controller="HostNamesController"  ng-init="findOne()">
    <div class="page-header">
        <h1>Edit Host Name Info</h1>
    </div>

    <form name="hostNameForm" class="form-inline" ng-submit="update(hostNameForm.$valid)" novalidate>
        <!-- Bootstrap Grid System with Panels-->
        <div class ="container">
            <!-- SubTitle -->
            <div class="col-lg-11">
                <kbd>Host Name Info</kbd>
            </div>

            <div class="row">
                <div class="col-lg-1">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="glyphicon glyphicon-save"></i>
                        </button>
                    </div>
                    <div ng-show="error" class="text-danger">
                        <strong ng-bind="error"></strong>
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group form-group-lg" show-errors>
                        <span class="label label-primary" >Name:&nbsp</span>
                        <input name="name" type="text" ng-model="hostName.name" ng-change="validateUnique()" id="name" class="form-control" required>
                        <div ng-messages="hostNameForm.name.$error" role="alert">
                            <p class="help-block error-text" ng-message="required">Host Name is required.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-primary" >Host Type:&nbsp</span>
                        <input name="hostType" type="text" ng-model="hostName.hostType" id="hostType" class="form-control">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Env Type:&nbsp</span>
                        <input name="envType" type="text" ng-model="hostName.envType" id="envType" class="form-control" >
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Originating Source:&nbsp</span>
                        <input name="originatingSource:" type="text" ng-model="hostName.originatingSource" id="originatingSource:" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Originating ID:&nbsp</span>
                        <input name="originatingID:" type="text" ng-model="hostName.originatingID" id="originatingSource:" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info">&nbsp&nbsp&nbspNote:&nbsp</span>
                        <input name="note" type="text" ng-model="hostName.note" id="note" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >&nbsp&nbsp&nbsp&nbspPBB:&nbsp</span>
                        <input name="PBB" type="text" ng-model="hostName.PBB" id="PBB" class="form-control" >
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-primary" >Common Name:&nbsp</span>
                        <input name="commonName" type="text" ng-model="hostName.address.commonName" id="commonName" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Street1:&nbsp</span>
                        <input name="street1" type="text" ng-model="hostName.address.street1" id="street1" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Street2:&nbsp</span>
                        <input name="street2" type="text" ng-model="hostName.address.street2" id="street2" class="form-control" >
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >&nbsp&nbsp&nbspCity:&nbsp</span>
                        <input name="city" type="text" ng-model="hostName.address.city" id="city" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >&nbsp&nbspState:&nbsp</span>
                        <input name="state" type="text" ng-model="hostName.address.state" id="state" class="form-control">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Postal Code:&nbsp</span>
                        <input name="postalCode" type="text" ng-model="hostName.address.postalCode" id="postalCode" class="form-control">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Country:&nbsp</span>
                        <input name="country" type="text" ng-model="hostName.address.country" id="country" class="form-control" >
                    </div>
                </div>
            </div>
            <!-- End of Line -->

            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Floor:&nbsp</span>
                        <input name="floor" type="text" ng-model="hostName.address.floor" id="floor" class="form-control">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Section:&nbsp</span>
                        <input name="section" type="text" ng-model="hostName.address.section" id="section" class="form-control">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >Semaphore:&nbsp</span>
                        <div class="btn-group" data-toggle="buttons">
                            <input type="radio" name="semaphore" ng-model="hostName.semaphore" value="Open">                            
                            <span class="badge">Open</span>
                            <input type="radio" name="semaphore" ng-model="hostName.semaphore" value="Busy">
                            <span class="badge">Busy</span>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Related Applications -->
            <div class="row">
                <div class="col-lg-10">
                    <kbd>Related Applications - {{hostName.relatedApplications.length}}</kbd>
                </div>
                <div class="col-lg-2 text-right">
                    <a class="btn btn-primary" ng-click="addRelatedApplication(hostName.relatedApplications);">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
            </div>


            <div ng-repeat="relatedApplication in hostName.relatedApplications| filter:'' track by $index" ng-init="relatedApplicationsIndex = $index">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group form-group-lg">                            
                            <span class="badge">{{relatedApplicationsIndex + 1}}:</span>                            
                            <span class="label label-info" >MOTS ID:&nbsp</span>
                            <input name="MOTSID" type="text" ng-model="relatedApplication.MOTSID" id="MOTSID" class="form-control" >
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group form-group-lg">
                            <span class="label label-info" >MOTS Acronym:&nbsp</span>
                            <input name="MOTSAcronym" type="text" ng-model="relatedApplication.MOTSAcronym" id="MOTSAcronym" class="form-control" >
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group form-group-lg">
                            <span class="label label-info" >MOTS Name:&nbsp</span>
                            <input name="MOTSName" type="text" ng-model="relatedApplication.MOTSName" id="MOTSName" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-3 text-right">
                        <a class="btn btn-primary" ng-click="saveMember(relatedApplication, hostName.relatedApplications, relatedApplicationsIndex);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-show="relatedApplicationsIndex > -1" ng-click="relatedApplicationsIndex = removeMember(hostNames.relatedApplications, relatedApplicationsIndex);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>

</section>
