<!-- //===========================================================================
 /*
    This file is part of the Cinema Web Interface Code.
    Copyright (C) 2015-2019 by Los Alamos National Lab.
    author:    Uzma Shaikh
 //===========================================================================*/ -->
<!DOCTYPE html>
<html ng-app="myApp">

<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="css/bootstrap.min.css" />

  <script data-require="angular.js@1.3.0" data-semver="1.3.0" src="js/angular.js"></script>
  <script src= "js/angular.min.js"></script>
  <script data-require="jquery@*" data-semver="2.0.3" src="js/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="js/bootstrap.min.js"></script>
  <script data-require="ui-bootstrap@0.4.0" data-semver="0.4.0" src="js/ui-bootstrap-tpls-0.4.0.min.js"></script>
  <script src="js/angular-animate.js"></script>
  
  <script src="js/app.js"></script>
  <script src="js/dirPagination.js"></script>
  
  <link rel="stylesheet"  href="css/pagination.css"/>
  <link rel="stylesheet"  href="css/groupings.css"/>

</head>
<body>

<div id="header">
 

</div>


<div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div ng-controller="MyController" class="my-controller" ng-init="showData()">
             <img align="right" src="img/cinema_logo_title_black.png" width="25%" height="25%"></img>
          <div class="row" ng-repeat="run in runDetails">
          <div class="col-xs-3" >
          
          <b><u>Input Deck</u><br>
           <span style="margin-left:2em">Images:  <font color="#AD3333">{{run.images}}</font> </span><br>
            <span style="margin-left:2em">Image-width:  <font color="#AD3333">{{run.image-width}}</font></span><br>
                 <span style="margin-left:2em">Space:  <font color="#AD3333">{{run.space}}</font></span><br>
                  <span style="margin-left:2em">Time:  <font color="#AD3333">{{run.time}}</font></span><br>

          </b>
          </div>
  
          <div class="col-xs-3">
          <b><u>Simulation Run Details</u><br>
          <span style="margin-left:2em">Name:  <font color="#AD3333">{{run.name}}</font></span><br>
          <span style="margin-left:2em">Version:  <font color="#AD3333">{{run.version}}</font></span><br>
          <span style="margin-left:2em">User:  <font color="#AD3333">{{run.user}}</font></span><br>

          </b>
          </div>
    
         <br>
                  <br>
            </div>
             <div class="row"><br></div>
           
		<div id="footer" ></div>
		<br>
		<br>

		
          <div class="row">
            <div class="col-xs-2">
              <label for="search">Search:</label>
          
          
             <input id="cinemaSearch" ng-model="cinemaSearch" class="form-control" placeholder="Search" ng-keyup="$event.keyCode == 13 && doSearch()"> 

            </div>
            <div class="col-xs-2">
              <label for="search">Items per page:</label>
              <input type="number" min="1" max="100" class="form-control" ng-model="pageSize">
            </div>

            

              <div class="col-xs-2">
                 <br>
  			<input class="styled-button-8" ng-click="clearSearch()" value="Clear Search" type="submit" />
            
            </div>
            
             <div class="col-xs-2">
                 <br>
  			<input class="styled-button-8"  onclick="window.open('http://localhost:8000')" value="Interactive Viewer" type="submit" />
            
            </div>
          </div>         
          <br>
          
          
      <div ng-repeat="cluster in clusters" class="Row"  ng-style="groupSearch">
	    <div ng-repeat="smallgroup in cluster.groups" class="Column">
	     <a  target="_blank" ng-click="doSpecificSearch(smallgroup.query)">
	    <div id="large">
	        <img src="{{smallgroup.image1}}" />
	    </div>
	    <div class="small">
	        <img src="{{smallgroup.image2}}" />
	    </div>
	    <div class="small">
	        <img src="{{smallgroup.image3}}" />
	    </div>
	     <div class="desc">{{smallgroup.label}}</div></a></div> 
  		</div>

          <div> <label>Search Image : </label>

           <br>
           <br>
            <img align="left" src="img/searchImage.png" ></img>
 </div>
<br>


         
          <br>
          <br>
          <br>
          <br>
             <br>
          <br>
<div><label> Similarity Search Results </label></div>
			<div style="float:left;"><img width="25%" height="25%" ng-model="arguments"  onclick="window.open(this.src,'_blank','height=770,width=963')"  popover="Time: {{argument.time}} Phi: {{argument.phi}} Theta: {{argument.theta}}" popover-trigger="mouseenter" popover-append-to-body="true" popover-title="Image Details" ng-style="{ 'margin-top':'30px', 'border':'solid 4px white', 'background-color':'#808080'}" dir-paginate="argument in arguments| filter:q | itemsPerPage: pageSize" src="image/{{argument.imgSrc}}"></img>
			</div>
			
		  <div class="text-center" ng-style="paginationTab">
          <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls>
          </div>
              		         
 		 </div>
      </div>
    </div>   
  </div>


  
<div id="footer">Copyright @ datascience.lanl.gov</div>
</body>

</html>
