<div class="container-fluid ng-cloak" ng-cloak>
    <h2>{{testName}}</h2>

    <div class="row stateHeader" ng-show="state === 'loading'">
        Loading...Please wait.
    </div>

    <div class="row stateHeader" ng-show="state === 'saving'">
        Saving...Please wait.
    </div>

    <div class="row stateHeader" ng-show="state == 'retry'">
        Server Busy Calculating Filediffs. We will reload in {{reloadInterval}}s.
    </div>

    <!-- Header with the pending changes and reset/save button -->
    <div class="row"
         ng-class="{ 'busyLoading': state !== 'ready' }"
         style="border: 1px solid #E1E1E1; padding: 0.5em; margin-left: 0; margin-right:0; margin-bottom: 1em;">
            <sk-pending-triage change-count="pendingCount"
                               reset-click="resetTriageState"
                               save-click="saveTriageState"
                               dirty="triageStateDirty"
                               logged-in="isLoggedIn">
            </sk-pending-triage>
    </div>

    <!-- main content -->
    <div class="row" ng-class="{ 'busyLoading': state !== 'ready' }">
        <div class="row">
            <!-- Left column -->
            <div class="col-md-2">
                <div>
                    <span class="triageHeadLine">
                        <span ng-show="showPositives">Positives ({{posStats.unique}})</span>
                        <span ng-hide="showPositives">Negatives({{negStats.unique}})</span>
                        <span ng-show="leftDigests">
                            <sk-bulk-triage triage-state="triageState" test-name="testName" setter="setTriageState" digests="leftDigests"></sk-bulk-triage>
                        </span>
                    </span><br>
                    <a href="" ng-click="switchLeftColumn()">
                        <span ng-hide="showPositives">Positives ({{posStats.unique}})</span>
                        <span ng-show="showPositives">Negatives({{negStats.unique}})</span>
                    </a>
                </div>

                <div class=" imagesColumn">

                    <div ng-hide="leftDigests">
                        No images available.
                    </div>
                    <div ng-show="leftDigests">
                        <div ng-repeat="oneDigest in leftDigests" style="padding-bottom: 1em;padding-top: 1em;">

                            <sk-img-container
                                img-url="oneDigest.imgUrl"
                                digest="oneDigest.digest"
                                test-name="testName"
                                setter="setTriageState"
                                triage-state="triageState"
                                initial-triage-state="initialTriageState">
                                     <img ng-click="selectLeft($index)"
                                          ng-src="{{oneDigest.imgUrl}}"
                                          class="columnImg"
                                          ng-class="{selectedImg: $index === leftIndex}">
                                    <div ng-if="showPositives && currentUntriaged">
                                        {{oneDigest.diff.numDiffPixels}}px &#183;
                                        {{oneDigest.diff.pixelDiffPercent | number: 2}}% &#183;
                                        {{oneDigest.diff.maxRGBADiffs | json }}
                                     </div>

                                    <div>
                                     {{oneDigest.count}} &#183; {{ (oneDigest.count / posStats.total) * 100.0 | number: 2 }} %
                                    </div>
                            </sk-img-container>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Center column -->
            <div class="col-md-8">

                <!-- Controls what show in center column -->
                <div class="row" style="border: 1px solid #E1E1E1; padding: 0.5em; margin-left: 0; margin-right:0; margin-bottom: 1em;">
                    <div class="pull-left">
                        <input type="checkbox"
                               ng-model="showSrcImages"> Show Source Images

                        <span ng-show="showPositives && currentLeft && currentUntriaged">
                           <input type="checkbox" ng-model="showOverlay"> Diff Overlay
                        </span>
                    </div>
                </div>

                <!-- Buttons to classify a digest -->
                <div ng-show="showPositives && currentUntriaged" class="row">
                    <div class="col-md-6">
                        &nbsp;
                    </div>
                    <div class="col-md-6">

                        <div class="row posNegButtonContainer" >
                            <button ng-disabled="triageState[testName][currentUntriaged.digest] === c.POSITIVE"
                                    ng-click="setTriageState(testName, currentUntriaged.digest, c.POSITIVE)"
                                    class="btn btn-success pull-left">Positive</button>
                            <button ng-disabled="triageState[testName][currentUntriaged.digest] === c.NEGATIVE"
                                    ng-click="setTriageState(testName, currentUntriaged.digest, c.NEGATIVE)"
                                    class="btn btn-danger pull-right">Negative</button>
                        </div>
                    </div>
                </div>

                <!-- source images -->
                <div class="row srcImageContainer" ng-if="showSrcImages">
                    <!-- positive source image -->
                    <div class="col-xs-6">
                        <div ng-if="!currentLeft">
                            No image available.
                        </div>
                        <div ng-if="currentLeft">
                            <img src=""
                                 ng-src="{{currentLeft.imgUrl}}"
                                 class="columnImg">
                        </div>
                    </div>

                    <!-- untriaged source image -->
                    <div class="col-xs-6">
                        <div ng-if="!currentUntriaged">
                            No untriaged images available.
                        </div>
                        <div ng-if="currentUntriaged">
                            <img ng-src="{{currentUntriaged.imgUrl}}"
                                 class="columnImg">
                        </div>
                    </div>
                </div>

                <!-- diff image -->
                <div class="row">
                    <div class="col-xs-6">
                        <div ng-if="showPositives && currentLeft && currentUntriaged">
                            <div class="row identicalContainer" ng-show="currentLeft.isIdentical()">
                                Images are identical !
                            </div>

                            <div class="imageBorder" ng-hide="currentLeft.isIdentical()">
                                <div class="imgNoBorder" ng-style="getOverlayStyle().backGround">
                                    <img ng-src="{{currentLeft.diff.diffImgUrl}}"
                                         class="diffImg imgNoBorder"
                                         ng-style="getOverlayStyle().foreGround">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-6">
                        <div class="row" ng-if="showPositives && currentLeft && currentUntriaged">
                               Diff:
                               {{currentLeft.diff.numDiffPixels}}px &#183;
                               {{currentLeft.diff.pixelDiffPercent | number: 2}}% &#183;
                               {{currentLeft.diff.maxRGBADiffs | json }}
                        </div>
                        <br>
                        <br>
                        <div class="row">
                            <div class="col-xs-12" ng-if="currentLeft && currentUntriaged">
                                    <sk-params params="currentLeft.paramCounts"
                                               params-two="currentUntriaged.paramCounts"
                                               filter="filterByParam">
                                    </sk-params>
                            </div>

                            <div class="col-xs-12" ng-if="currentLeft && !currentUntriaged">
                                    <sk-params params="currentLeft.paramCounts" filter="filterByParam">
                                    </sk-params>
                            </div>

                            <div class="col-xs-12" ng-if="currentUntriaged && !currentLeft">
                                    <sk-params params="currentUntriaged.paramCounts"
                                               filter="filterByParam">
                                    </sk-params>
                            </div>
                        </div>

                        <div class="row" ng-show="currentUntriaged && commitsList">
                            <h4>Blamelist (score, commit, author):</h4>
                            <div class="row" ng-repeat="c in commitsList.commits">
                                <div class="col-xs-2">
                                    {{ c.count }}
                                </div>
                                <div class="col-xs-2">
                                    <a href="https://skia.googlesource.com/skia/+/{{c.hash}}" target="_blank">
                                       {{ c.hash | limitTo:7 }}
                                   </a>
                                </div>
                                <div class="col-xs-4">
                                    {{ (c.commit_time*1000) | date:'EEE MM/dd/yy hh:mm a'}}
                                </div>
                                <div class="col-xs-4">
                                    {{ c.author }}
                                </div>
                            </div>
                            <div class="row" ng-show="commitsList.hasMore">
                                <div class="col-xs-12">
                                    &nbsp; &nbsp; <a href="" ng-click="expandCommitsList()">Following Commits ...</a>
                                </div>
                            </div>

<!--                             {{ commitsList | json }}
 -->
                        </div>
                        <br>

                    </div>
                </div>
                <br>
                <br>

                <br>

                <div>
                    <sk-query all-params="allParams" query="query" click-update="loadTriageData()">
                    </sk-query>
                </div>
                <br>
            </div>

            <!-- Right column -->
            <div class="col-md-2">

                <div>
                    <span class="triageHeadLine">
                        <span>Untriaged ({{untStats.unique}})</span>
                        <span ng-show="untriaged">
                            <sk-bulk-triage triage-state="triageState" test-name="testName" setter="setTriageState" digests="untriaged"></sk-bulk-triage>
                        </span>
                    </span>
                </div>

                <div class="imagesColumn">
                    <div ng-hide="currentUntriaged">
                        No untriaged images available.
                    </div>
                    <div ng-show="currentUntriaged">
                        <div ng-repeat="oneUntriaged in untriaged">
                            <div>
                                <sk-img-container
                                    img-url="oneUntriaged.imgUrl"
                                    digest="oneUntriaged.digest"
                                    test-name="testName"
                                    setter="setTriageState"
                                    triage-state="triageState"
                                    initial-triage-state="initialTriageState">
                                        <img ng-click="selectUntriaged($index)"
                                             ng-src="{{oneUntriaged.imgUrl}}"
                                             class="columnImg"
                                             ng-class="{selectedImg: $index === untIndex}">

                                        <div>
                                            {{oneUntriaged.count}} &#183; {{ (oneUntriaged.count / untStats.total) * 100.0 | number: 2 }} %
                                        </div>
                                </sk-img-container>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>