<!-- BootStrap NavBar -->
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
	<h3><a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a></h3>
    </div>
  </div>
</div>

<div class="container">

<div class="page-header">
	<div class="row">
		<div class="span12">
			<h2>Dancer + Bootstrap Examples</h2>
			<h1>Photo Gallery - Grid</h1>
		</div>
	</div>
</div>

<div class="row">
	<div class="span12">
	Example of using <a target="_blank" href="http://twitter.github.com/bootstrap/components.html#thumbnails">Bootstrap's Thumbnails</a> with Dancer.
	<br/>
	<br/>
	<br/>

	<h3>Code Highlights</h3>
	<ul>
		<li>The Dancer code is in
                    <a href="[% request.uri_for("/show_file",file => "photo_gallery.pm", example => "photo grid", url => request.uri_for("/photo_grid") ) %]">
                    <code>./lib/examples/photo_gallery.pm</code> <i class="icon-eye-open"></i> </a>.
                </li>

		<li>This HTML tempate is in
                    <a href="[% request.uri_for("/show_file",file => "photo_grid.tt", example => "photo grid", url => request.uri_for("/photo_grid") ) %]">
                    <code>./views/examples/photo_grid.tt</code> <i class="icon-eye-open"></i> </a>.
                </li>
		<li>The photos to display are degined in the <code>@photos</code> variable in the Dancer module.</li>
	</ul>

	</div>
</div>

<br/>
<br/>

[%#################################
   Photo Grid Example Starts Here
#################################%]

<div class="row">
<h2>Example Photo Grid/Thumbnails</h2>
<p>Enjoy the show!</p>

<ul id="dancing_gallery" class="thumbnails">
[%### loop over the "photos" list, and create HTML for each photo %]
[% FOREACH photo IN photos %]
	<li  class="span2">
		<a href="#" class="thumbnail">
			<img src="[% request.uri_base %]/images/gallery/[% photo.file %]"
				alt="[% photo.caption | html %]" />
		</a>
	</li>
[% END %]
</ul>

</div>