<section ng-controller="HostNamesController">
    <div class="page-header">
        <h2>Generate Host Name Group</h2>
    </div>
    <form name="hostNameForm" class="form-inline" ng-submit="hostNameSearch(hostNameForm.$valid)" novalidate>
        <!-- Bootstrap Grid System with Panels-->
        <div class ="container">
            <!-- SubTitle -->
            <div class="col-lg-11">
                <kbd>Host Generation Parameters</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-search"></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">
                        <span class="label label-warning" >Number of hosts:&nbsp</span>
                        <input name="instanceCt" type="text" ng-model="hostNameRequest.instanceCt" id="instanceCt" class="form-control" >
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-warning" >Host Type:&nbsp</span>
                        <input name="hostType" type="text" ng-model="hostNameRequest.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-warning" >Env Type:&nbsp</span>
                        <input name="envType" type="text" ng-model="hostNameRequest.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">&nbsp&nbsp&nbsp&nbsp&nbspNote:&nbsp</span>
                        <input name="note" type="text" ng-model="hostNameRequest.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&nbsp&nbspPBB:&nbsp</span>
                        <input name="PBB" type="text" ng-model="hostNameRequest.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-warning" >Common Name:&nbsp</span>
                        <input name="commonName" type="text" ng-model="hostNameRequest.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="hostNameRequest.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="hostNameRequest.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="hostNameRequest.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="hostNameRequest.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="hostNameRequest.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="hostNameRequest.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="hostNameRequest.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="hostNameRequest.hostName.address.section" id="section" class="form-control">
                    </div>
                </div>
            </div>

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

            <div ng-repeat="relatedApplication in hostNameRequest.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, hostNameRequest.hostName.relatedApplications, relatedApplicationsIndex, relatedApplicationsIndex);">
                            <i class="glyphicon glyphicon-save"></i>
                        </a>
                        <a class="btn btn-primary" ng-show="relatedApplicationsIndex > -1" ng-click="relatedApplicationsIndex = removeMember(hostNameRequest.hostName.relatedApplications, relatedApplicationsIndex);">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <a class="btn btn-primary" ng-click="generate();">
        <i class="glyphicon glyphicon-cog"></i>
    </a>
    <div class="panel panel-group panel-default">
        <div class="panel-heading">
            <div class ="row">
                <div class="col-lg-1">.</div>
                <div class="col-lg-2">
                    <span class="label label-primary">Host Name</span>
                </div>
                <div class="col-lg-2">
                    <span class="label label-primary">Host Type</span>
                </div>
                <div class="col-lg-2">
                    <span class="label label-primary">Env Type</span>
                </div>
                <div class="col-lg-2">
                    <span class="label label-primary">Originating Source</span>
                </div>
                <div class="col-lg-1">
                    <span class="label label-primary">Originating ID</span>
                </div>
            </div>
        </div>

        <div class="panel panel-body">
            <div ng-repeat="hostName in generatedList"
                 ui-sref="hostNames.view({hostNameId: hostName._id})">
                <div class="row" ng-class-odd="'alt'">
                    <div class="col-lg-1">
                        <div class="handpointer glyphicon glyphicon-chevron-right"
                             data-ng-click="collapse($event)" data-target="#view_{{hostName.name}}"
                             data-toggle="collapse" aria-expanded="false"
                             aria-controls="view_{{hostName.name}}"
                             data-ng-if="hostName.items != null">
                        </div>
                    </div>

                    <div class="col-lg-2">
                        {{hostName.name}}
                    </div>
                    <div class="col-lg-2">
                        {{hostName.hostType}}
                    </div>
                    <div class="col-lg-2">
                        {{hostName.envType}}
                    </div>
                    <div class="col-lg-2">
                        {{hostName.originatingSource}}
                    </div>
                    <div class="col-lg-1">
                        {{hostName.originatingID}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>