<section ng-controller="HostNamesController" ng-init="findOne()">
    <div class="page-header">
        <h2>View Host Name Unit</h2>
    </div>

    <!-- Bootstrap Grid System with Panels-->
    <!-- SubTitle -->
    <div class ="container">
        <div class="row">
            <div class="col-lg-10">
                <kbd>Host Name Info</kbd>
            </div>
            <div class="col-lg-2" ng-show="(authentication.user.roles.indexOf('user') > -1) || (authentication.user.roles.indexOf('admin') > -1)">
                <a class="btn btn-primary" ui-sref="hostNames.edit({hostNameId: hostName._id})">
                    <i class="glyphicon glyphicon-edit"></i>
                </a>
                <a class="btn btn-primary" ng-click="remove();">
                    <i class="glyphicon glyphicon-trash"></i>
                </a>
                <a class="btn btn-primary" ng-click="replicate(hostName)">
                    <i class="glyphicon glyphicon-duplicate"></i>
                </a>
            </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" >Name:&nbsp</span>
                    {{hostName.name}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Host Type:&nbsp</span>
                    {{hostName.hostType}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Env Type:&nbsp</span>
                    {{hostName.envType}}&nbsp;
                </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>
                    {{hostName.originatingSource}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Originating ID:&nbsp</span>
                    {{hostName.originatingID}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info">Note:&nbsp</span>
                    {{hostName.note}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >PBB:&nbsp</span>
                    {{hostName.PBB}}&nbsp;
                </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" >Common Name:&nbsp</span>
                    {{hostName.address.commonName}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Street1:&nbsp</span>
                    {{hostName.address.street1}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Street2:&nbsp</span>
                    {{hostName.address.street2}}&nbsp;
                </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" >City:&nbsp</span>
                    {{hostName.address.city}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >State:&nbsp</span>
                    {{hostName.address.state}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Postal Code:&nbsp</span>
                    {{hostName.address.postalCode}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Country:&nbsp</span>
                    {{hostName.address.country}}&nbsp;
                </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>
                    {{hostName.address.floor}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Section:&nbsp</span>
                    {{hostName.address.section}}&nbsp;
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group form-group-lg">
                    <span class="label label-info" >Semaphore:&nbsp</span>
                    <span class="badge">{{hostName.semaphore}}</span>                    
                </div>
            </div>
        </div>
        <!-- End of Line -->

        <!-- Related Applications -->
        <div class="row">
            <div class="col-lg-10">
                <kbd>Related Applications - {{hostName.relatedApplications.length}}</kbd>
            </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>
                        {{relatedApplication.MOTSID}}&nbsp;
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >MOTS Acronym:&nbsp</span>
                        {{relatedApplication.MOTSAcronym}}&nbsp;
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group form-group-lg">
                        <span class="label label-info" >MOTS Name:&nbsp</span>
                        {{relatedApplication.MOTSName}}&nbsp;
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
