@(image:models.Image)

@main("Image") {
  	<h1>Image <small>@image.checksum</small></h1>
  	<div class="row">
  		<div class="col-md-8">
  			<h2>Thumbnail</h2>
  			<p>
  				<a target="_thumbnail_@image.id" href="@routes.Images.thumbnail(image.checksum)">
	  			<img class="img-thumbnail" title="@image.name" src="@routes.Images.thumbnail(image.checksum)" /> 
	  			</a>
  			</p>  		
  		</div>  
  		<div class="col-md-4">
  			<h2>Main Colors</h2>
  			<dl>
  				<dt>Main</dt><dd><img src="@routes.Colors.sample(image.mainColor, 48, 48)" /> @image.mainColor</dd>
  				<dt>Avg</dt><dd><img src="@routes.Colors.sample(image.avgColor, 48, 48)" /> @image.avgColor</dd>
  				<dt>Med</dt><dd><img src="@routes.Colors.sample(image.medColor, 48, 48)" /> @image.medColor</dd>
  			</dl>
  		</div>  
  		<div class="col-md-8">
  			<h2>Sobel (edges)</h2>
  			<p>
  				<a target="_sobel_@image.id" href="@routes.Images.sobel(image.checksum)">
	  			<img class="img-thumbnail" title="@image.name" src="@routes.Images.sobel(image.checksum)" /> 
	  			</a>
  			</p>  		
  		</div>    			
	</div>
	<div class="row">		  	
  		<div class="col-md-3">
  			<h2>Reference</h2>
  			<p>
	  			<img class="img-thumbnail" title="@image.name" src="@routes.Images.reference(image.checksum)" /> 
  			</p>
		</div>
  		<div class="col-md-4">  			
  			<h2>Signature</h2>
  			<div class="panel panel-default">
	  			<div class="panel-body">
				@for(row <- image.signatureAsMatrix().split("\n")) {
					@for(col <- row.split(",")) {
						<img src="@routes.Colors.sample(col, 48, 48)" />
					}
					<br />
				}
	  			</div>
	  		</div>
  		</div>
	</div>
}