<div class="container-fluid ng-cloak" ng-cloak>
    <h3>Triage</h3>

    <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>

    <div class="row" ng-class="{ 'busyLoading': state !== 'ready' }">
	    <div class="row"
	         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>

        <!-- 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="col-xs-2">
	                <input type="checkbox"
	                       ng-model="showUntriagedOnly"
	                       ng-change="updateContent()"> Show only Untriaged
               </div>

               <div class="col-xs-2">
	                <input type="checkbox"
	                       ng-model="collapseTests"
	                       ng-change="updateContent()"> Collapse Untriaged
               </div>

<!-- 	           <div class="col-xs-2" ng-if="!collapseTests">
	            	Change All On Current Page:
			    	<sk-bulk-triage
			    	    triage-state="triageState"
		                setter="setTriageState"></sk-bulk-triage>
	            </div> -->

	            <div class="pull-right">
	            	<sk-pagination paginator="paginator"></sk-pagination>
	            </div>
        </div>

        <div class="row countsQueryContainer">
        	<div class="col-xs-12">
		        <sk-query all-params="allParams"
		                  query="filteredQuery"
		                  click-update="loadAllTriageData()"></sk-query>
		    </div>
	    </div>
	    <br><br>

        <div class="row">
        	<div class="col-xs-6">
        		<div>
        			<div class="col-xs-2" style="padding:6px;">
        				<span style="font-weight: bold; text-align: right;">Commit Range:</span>
        			</div>
        			<div class="col-xs-3">
        				<input type="text"
        					   ng-model="commitRangeQuery[c.QUERY_COMMIT_START]"
        				       placeholder="Start Commit"
        				       style="width: 100%; padding: 6px;">
				    </div>
 				    <div class="col-xs-3">
					    <input type="text"
        					   ng-model="commitRangeQuery[c.QUERY_COMMIT_END]"
        					   placeholder="End Commit"
        					   style="width: 100%; padding: 6px;">
					</div>
					<div class="col-xs-3">
						<button ng-click="resetCommitRangeQuery()"
								ng-disabled="crClean"
						        class="btn btn-default">Reset</button>

						<button ng-click="selectCommitRange()"
						        ng-disabled="crClean"
						        class="btn btn-primary">Update</button>
					</div>
	  			</div>
        	</div>

        	<div class="col-xs-6 pull-right" style="padding: 6px;">

        		<div style="display:inline; font-weight: bold; padding-right:5em;">
	              <input type="checkbox"
		                 ng-model="headSelected"
		                 ng-true-value="1" ng-false-value="0"
		                 ng-change="headChanged()"> HEAD only
		        </div>

        		<div style="display:inline; font-weight: bold;">
        			Show # of commits:
        		</div>
        		<div class="autoRange" ng-repeat="cr in crLinks">
 	        		<span ng-if="cr.start.hash === commitRangeQuery[c.QUERY_COMMIT_START]">{{cr.name}}</span>
	        		<a ng-if="cr.start.hash !== commitRangeQuery[c.QUERY_COMMIT_START]" href=""  ng-click="selectCommitRange(cr)">{{cr.name}}</a>
	        	</div>
		    </div>
	    </div>
	    <br><br>

    	<div class="row">
		    <div class="col-md-12">
				<table class="table table-hover table-condensed" style="font-size:font-size: small;">
			      <thead>
			        <tr>
			          <th>Test</th>
			          <th>+ ({{selectionInfo.posStats.unique}})</th>
			          <th>- ({{selectionInfo.negStats.unique}})</th>
			          <th>? ({{selectionInfo.untStats.unique}})</th>
			          <th>Blame</th>
			          <th>Diff</th>
			          <th>Pos Image</th>
			          <th>Unt Image</th>
			          <th>Diff Image</th>
			          <th>&nbsp;</th>
			        </tr>
			      </thead>

			      <tbody>
<!-- 			        <tr>
			          <td><a href="#/counts">All Tests</a></td>
			          <td>{{allAggregates.pos}}</td>
			          <td>{{allAggregates.neg}}</td>
			          <td>{{allAggregates.unt}}</td>
			          <td>&nbsp;</td>
			          <td>&nbsp;</td>
			          <td>&nbsp;</td>
			          <td>&nbsp;</td>
			        </tr> -->
			        <tr ng-repeat="oneTest in allTests">
			          <td style="max-width:15em; word-break: break-all;">
			              <a href="#/triage/{{oneTest.name}}{{qStr}}"
			          	  	 title="{{oneTest.name}}">
			          		<span ng-show="oneTest.showName">{{oneTest.name | limitTo:65 }}<span>
			          	  </a>
			          	  &nbsp; &nbsp; <a href="#/triage/{{oneTest.name}}{{qStr}}" target="_blank" title="{{oneTest.name}}"><span class="glyphicon glyphicon-new-window">
      </span></a>
			      	  </td>
			          <td><span ng-show="oneTest.showName">{{oneTest.posUnique}}</td>
			          <td><span ng-show="oneTest.showName">{{oneTest.negUnique}}</td>
			          <td><span ng-show="oneTest.showName">{{oneTest.untUnique}}</td>

                      <!-- Blame -->
                      <td>
                      	<div ng-if="oneTest.untriaged">
                      		<div ng-repeat="author in getBlames(oneTest)" class="row">
                      			{{ author }}
                      		</div>
                      	</div>
                      </td>

                      <!-- Diff metric -->
                      <td>
                      	 <div ng-if="!collapsed && oneTest.untriaged && oneTest.pos">
							{{oneTest.diff.numDiffPixels}}px &#183;
                            {{oneTest.diff.pixelDiffPercent | number: 2}}% &#183;
                            {{oneTest.diff.maxRGBADiffs | json }}
                      	 </div>
                      </td>

			          <!-- Positive Image -->
			          <td ng-style="{ width: imageSize+'px' }">
			          	<div ng-if="oneTest.pos">
                            <sk-img-container
                                img-url="oneTest.pos.imgUrl"
                                digest="oneTest.pos.digest"
                                test-name="oneTest.name"
                                setter="setTriageState"
                                triage-state="triageState"
                                initial-triage-state="initialTriageState">
                                	<img ng-style="{ width: imageSize+'px' }"
                                         ng-src="{{ oneTest.pos.imgUrl }}" >
                            </sk-img-container>
	                    </div> &nbsp;
                      </td>

                      <!-- Untriaged -->
			          <td ng-style="{ width: imageSize+'px' }">
			          	<div ng-if="!collapsed && oneTest.untriaged" ng-style="{ width: imageSize+'px' }">
                            <sk-img-container
                                img-url="oneTest.untriaged.imgUrl"
                                digest="oneTest.untriaged.digest"
                                test-name="oneTest.name"
                                setter="setTriageState"
                                triage-state="triageState"
                                initial-triage-state="initialTriageState">
                                	<img ng-style="{ width: imageSize+'px' }"
                                         ng-src="{{ oneTest.untriaged.imgUrl }}" >
                            </sk-img-container>
                        </div> &nbsp;
                      </td>

                      <!-- Diff image -->
			          <td ng-style="{ width: imageSize+'px' }">
	    		          	<div ng-if="oneTest.diff">
	                            <sk-img-container
	                                img-url="oneTest.diff.diffImgUrl">
	                                	<img ng-style="{ width: imageSize+'px' }"
	                                         ng-src="{{ oneTest.diff.diffImgUrl }}" >
	                            </sk-img-container>
                            </div>
                      </td>

                      <!-- Diff Metric TODO(stephana) -->
			          <td ng-style="{ width: imageSize+'px' }">
	    		          	<div ng-if="oneTest.diff">
	    		          		{{ diff.maxRGBADiffs | json }} - {{dObj.numDiffPixels}}
                            </div>
                      </td>

			        </tr>
			      </tbody>
			    </table>
		    </div>
		</div>

    </div>
</div>