{% extends 'layout-unfold2.html' %}

{% block unfold_main %}

{% insert_str prelude "css/sample.css" %}
{% insert prelude_js %}
$(function(){$('#tooltipid').tooltip({'selector':'','placement':'bottom'});});
{% endinsert %}

<div id=sample-tabs>
<ul class="nav nav-tabs" id='foo'>
  <li >				<a href="#name1" data-toggle="tab">Here</a></li>
  <li class="active">		<a href="#name2" data-toggle="tab">Other</a></li>
</ul>
<div class="tab-content">
   <div class="tab-pane fade in" id="name1">
     <p> {{ lorem|safe }} </p>
   </div>
   <div class="tab-pane fade in active" id="name2">
     <p> Sample tabs, this one is the active one; A shorter Lorem <code> with embedded code </code> <span class='bold'>ipsum dolor</span> sit amet, consectetuer
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
   </div>
</div>   
</div>

<p>Let's see what a <button class='unfold-warning btn btn-warning'>warning button</button> looks like.</p>

<div class='well'> a sample of the 'well' class quis nostrud exercitation </div>

a first <a id='tooltipid' href="#" data-toggle="tooltip" data-original-title="what the tooltip displays"> attempt with tooltips </a>

Let us now try to attach <button id='mylougout' class='btn btn-danger' data='mydata'>a click function to a button</button>
<script>
function foo() {alert ('foo ' + $(this).attr('data'));}
$(function() {$('#mylougout').click(foo);})
</script>

<div>
 {{ lorem }}   Lorem <span class='bold'>ipsum dolor</span> <code> counter += 1
  </code> sit amet, consectetuer
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
    veniam,  ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel
    illum dolore eu feugiat nulla facilisis at vero eros et accumsan
    et iusto odio dignissim qui blandit praesent luptatum zzril
    delenit augue duis dolore te feugait nulla facilisi. Nam liber
    tempor cum soluta nobis eleifend option congue nihil imperdiet
    doming id quod mazim placerat facer possim assum. Typi non habent
    claritatem insitam; est usus legentis in iis qui facit eorum
    claritatem. Investigationes demonstraverunt lectores legere me
    lius quod ii legunt saepius. Claritas est etiam processus
    dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum
    est notare quam littera gothica, quam nunc putamus parum claram,
    anteposuerit litterarum formas humanitatis per seacula quarta
    decima et quinta decima. Eodem modo typi, qui nunc nobis videntur
    parum clari, fiant sollemnes in futurum.
  </div>
{% endblock unfold_main %}

{% block unfold_margin %}
This text is shorter on purpose Lorem <span class='bold'>ipsum
   dolor</span> sit amet, consectetuer adipiscing elit, sed diam
   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
   volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
   consequat.
{% endblock unfold_margin %}