<section class="FactDataTable SystemTrackingContainer-main" ng-if="!error">
    <div class="alert alert-info" ng-if="singleResultView">
        The selected fact scans were identical for this module. Showing all facts from the latest selected scan instead.
    </div>
    <div class="FactDataTable-headingRow">
        <span class="FactDataTable-column FactDataTableHeading">
          <span class="FactDataTableHeading-label">
            Comparing facts from:
          </span>
      </span>
        <span class="FactDataTable-column FactDataTableHeading">
          <span ng-if="leftDataNoScans">
              <span class="u-unbold">No scans for</span>
              {{leftHostname}}
              <span class="u-unbold">on</span>
          </span>
          <span class="FactDataTableHeading-host" ng-if="!leftDataNoScans">{{leftHostname}}&ensp;-&ensp;</span>
          <span class="FactDataTableHeading-date" ng-if="!singleResultView"> {{leftScanDate|longDate}}</span>
          <span class="FactDataTableHeading-date" ng-if="singleResultView"> {{rightScanDate|longDate}}</span>
      </span>
        <span class="FactDataTable-column FactDataTableHeading" ng-if="!singleResultView">
          <span ng-if="rightDataNoScans">No scans for {{rightHostname}} on</span>
          <span class="FactDataTableHeading-host" ng-if="!rightDataNoScans">{{rightHostname}}&ensp;-&ensp;</span>
          <span class="FactDataTableHeading-date">{{rightScanDate|longDate}}</span>
      </span>
    </div>
    <div ng-if="!isNestedDisplay">
        <div class="FactDataTable-repeat" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
            <div class="FactDataTable-row FactDataTable-row--flexible" ng-if="group.containsValueArray">
                <span class="FactDataTable-column">{{group.facts.keyName}}</span>
                <span class="FactDataTable-column FactDataTable-columnArray">
                    <span class="FactDataTable-columnMember u-wrappedText" ng-repeat="value in group.facts.value1" style="position: relative;">
                        {{value}}
                    </span>
                </span>
                <span class="FactDataTable-column FactDataTable-columnArray" ng-if="!singleResultView">
                    <span class="FactDataTable-columnMember u-wrappedText" ng-repeat="value in group.facts.value2" style="position: relative;">
                        {{value}}
                    </span>
                </span>
            </div>
            <div class="FactDataTable-row" ng-if="!group.containsValueArray">
                <span class="FactDataTable-column">{{group.facts.keyName}}</span>
                <span class="FactDataTable-column u-wrappedText" style="position: relative;">{{group.facts.value1}}</span>
                <span class="FactDataTable-column u-wrappedText" ng-if="!singleResultView" style="position: relative;">{{group.facts.value2}}</span>
            </div>
        </div>
    </div>
    <div ng-if="isNestedDisplay">

        <div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">

            <div class="FactDataTable-groupHeadingRow" ng-if="group.displayKeyPath">
                <span class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
                    {{group.displayKeyPath}}
                </span>
            </div>
            <div class="FactDataGroup-facts" data-facts="{{group.facts}}">
                <div class="FactDataTable-arrayGroup" ng-if="group.isFactArray" ng-repeat="arrayGroup in group.facts" data-array-group="{{arrayGroup}}">
                    <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in arrayGroup" data-fact="{{fact}}">
                        <span class="FactDatum-keyName FactDataTable-column" ng-if="!fact.isArrayMember">
                        {{fact.keyName}}
                        </span>
                        <span class="FactDatum-keyName FactDataTable-column u-wrappedText" ng-if="fact.isArrayMember">
                          {{fact.keyPath[0]}}.{{fact.keyName}}
                        </span>
                        <span class="FactDatum-value FactDataTable-column u-wrappedText" style="position: relative;">
                        {{fact.value1}}
                        </span>
                        <span class="FactDatum-value FactDataTable-column u-wrappedText" ng-if="!singleResultView" style="position: relative;">
                        {{fact.value2}}
                        </span>
                    </div>
                </div>
                <div class="FactDataTable-row FactDatum" ng-class="{'FactDatum--divergent': fact.isDivergent }" ng-repeat="fact in group.facts" ng-unless="group.isFactArray" data-fact="{{fact}}">
                    <span class="FactDataTable-column FactDatum-keyName" ng-if="!fact.isArrayMember">
                    {{fact.keyName}}
                    </span>
                    <span class="FactDataTable-column FactDatum-keyName" ng-if="fact.isArrayMember">
                      {{fact.keyPath[0]}}.{{fact.keyName}}
                    </span>
                    <span class="FactDataTable-column FactDatum-value u-wrappedText" style="position: relative;">
                    {{fact.value1}}
                    </span>
                    <span class="FactDataTable-column FactDatum-value u-wrappedText" ng-if="!singleResultView" style="position: relative;">
                    {{fact.value2}}
                    </span>
                </div>
            </div>
        </div>
    </div>

</section>
