<!-- 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 - Carousel</h1>
		</div>
	</div>
</div>

<div class="row">
	<div class="span12">
	Example of using <a target="_blank" href="http://twitter.github.com/bootstrap/javascript.html#carousel">Bootstrap's Carousel</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 carousel", url => request.uri_for("/photo_carousel") ) %]">
                    <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_carousel.tt", example => "photo carousel", url => request.uri_for("/photo_carousel") ) %]">
                    <code>./views/examples/photo_carousel.tt</code> <i class="icon-eye-open"></i> </a>.
                </li>
		<li>The photos to display are defined in the <code>@photos</code> variable in the Dancer module.</li>
	</ul>

	</div>
</div>

<br/>
<br/>

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

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

<div style="max-width: 800px;" class="carousel slide" id="dancing_carousel">

	<div class="carousel-inner">
	[%### loop over the "photos" list, and create HTML for each photo %]
	[% FOREACH photo IN photos %]
		<div class="item [% IF loop.index==0 %]active[% END %]">
			<img src="[% request.uri_base %]/images/gallery/[% photo.file %]"
				alt="[% photo.caption | html %]" />
			<div class="carousel-caption">
				<h4>[% photo.caption | html %]</h4>
				<p>[% photo.text | html %]</p>
			</div>
		</div>
	[% END %]
	</div>

	<!-- Carousel's Next/Prev buttons -->
	<a class="left carousel-control" href="#dancing_carousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#dancing_carousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>