<div ng-if="!diff" class="p3x-gitlist-commit-diff-loader">
    <i class="fas fa-cog fa-spin"></i> Hang on, loading the diffs via AJAX and using deffered rendering ...
</div>

<div ng-if="diff && !done" class="p3x-gitlist-commit-diff-loader p3x-gitlist-commit-diff-loader-bottom">
    <i class="fas fa-cog fa-spin"></i> Rendering non blocking huge diffs: {{ diff.lines.length }} / {{ diffLength }} <br/>
</div>

<div style="max-height: {{ $root.gitlist.editorMaxHeight }}px; overflow-y: auto;" id="p3x-gitlist-commit-diff-scroller-{{ $ctrl.loopIndex }}">
    <table id="p3x-gitlist-commit-diff-ng-table" ng-if="diff" style="min-width: 100%; max-width: 100%">
        <tr>
            <td class="lineNo">Old</td>
            <td class="lineNo">&nbsp;&nbsp;</td>
            <td class="old">{{diff.old}}</td>
        </tr>
        <tr>
            <td class="lineNo">&nbsp;&nbsp;</td>
            <td class="lineNo">New</td>
            <td class="new">{{diff.new}}</td>
        </tr>
        <tr ng-repeat="lineInfo in diff.lines">
            <td class="lineNo">
                {{showNumber(lineInfo) ? lineInfo['num-old'] : '&nbsp;&nbsp;'}}
            </td>
            <td class="lineNo">
                {{showNumber(lineInfo) ? lineInfo['num-new'] : '&nbsp;&nbsp;'}}
            </td>
            <td style="width: 100%">
                <pre class="{{lineInfo.type}}">{{lineInfo.line}}</pre>
            </td>
        </tr>
    </table>
</div>