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

<!-- HEADER line -->
<div class="container">

<div class="page-header">
	<div class="row">
		<div class="span12">
			<h2>Dancer + Bootstrap Examples</h2>
			<h1>Tabs (with dynamic content)</h1>
		</div>
	</div>
</div>

<div class="row">
	<div class="span12">
The tabs below show excerpts of several books. The content is set in the Dancer module, and rendered by the Template::Toolkit as <a href="http://twitter.github.com/bootstrap/components.html#navs">Bootstrap tabs</a>.
	
	<br/>
	<br/>
	<br/>

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

		<li>This HTML tempate is in
                    <a href="[% request.uri_for("/show_file",file => "tabs.tt", example => "tabs", url => request.uri_for("/tabs") ) %]">
                    <code>./views/examples/tabs.tt</code> <i class="icon-eye-open"></i> </a>.
                </li>
		<li>The list of books is stored in the <code>@books</code> Perl variable.</li>
		<li>Boostrap supports several UI types of tabs (tabs,pills,stacked/non-stacked) and switching between then is just a matter of changing a CSS class. See the <code>navtype</code> and <code>stacked</code> variables in the Dancer module and the Template file.</li>
	</ul>
	</div>
</div>

[%#############################################################
 Button group demo:
 This is not part of the Tabs example, but it shows how
 to use group-buttons, and highlight the "active" one
 (the default "btn" class is gray, and the "btn-primary" class is blue.

 Note: this could probably be done complete on the client-side with
 lots of JQuery, but the whole point is to show Server-side Dancer/Bootstrap interaction.
#############################################################%]
	Show as:
	<div class="btn-group">
		<a href="?navtype=tabs&stacked=0"  class="btn [% IF stacked==0 AND navtype=="tabs"%]btn-primary[% END %]">Tabs</a>
		<a href="?navtype=pills&stacked=0" class="btn [% IF stacked==0 AND navtype=="pills"%]btn-primary[% END %]">Pills</a>
		<a href="?navtype=tabs&stacked=1"  class="btn [% IF stacked==1 AND navtype=="tabs"%]btn-primary[% END %]">Stacked-Tabs</a>
		<a href="?navtype=pills&stacked=1" class="btn [% IF stacked==1 AND navtype=="pills"%]btn-primary[% END %]">Stacked-Pills</a>
	</div>
	<br/>
	<br/>

<div class="row">
	<div class="span12">
	<h2>Selected Books - Tab navigation example:</h2>
	</div>
</div>

	<br/>

[%#############################################################
     TABS example starts here.

  The "books" variable is a list-of-hashref, set by dancer.

  The stacked & navtype variables are set by Dancer, and will 
  slightly affect the HTML we generate:
  If the user wanted "stacked", we'll show the tabs/pills <UL> element
  to the left of the content, and so we'll have two bootstrap cells of span4 + span8.

  If the user wanted "non-stacked", we'll show the tab/pills <UL> element
  above the tab content, and so we'll have just one bootstrap cell of span12.
##############################################################%]


<div class="row">

[% IF stacked %]
	<div class="span4">
[% ELSE %]
	<div class="span12">
[% END %]


[%##### First loop: create the tab headers as <ul> element %]
<ul class="nav nav-[% navtype %] [% IF stacked %]nav-stacked[% END %]">
[% FOREACH book IN books %]
	<li [% IF loop.index==0 %]class="active"[% END %]><a href="#[% book.uuid %]" data-toggle="tab">[% book.title | html %]</a></li>	
[% END %]
</ul>


[% IF stacked %]
	</div>
	<div class="span8">
[% END %]


[%##### Second loop: create the tab-content for each book %]
<div id="myTabs" class="tab-content">
[% FOREACH book IN books %]
	<div class="tab-pane [% IF loop.index==0 %]active[% END %]" id="[% book.uuid %]">
		<h3>[% book.title | html %] <small><a href="[% book.url %]">[% book.url | html %]</a></small></h3>
		<strong>By [% book.author | html %]</strong><br/>

		<br/>
		<h5>[% book.chapter_title | html %]</h5>
		[% book.excerpt | html_para %]
	</div>
[% END %]
</div>

	</div>
</div>