{% extends "base.html" %}

{% block extra_head %}

<script src="{{ url_for("static", filename="shared/jquery-1.8.1.min.js") }}" type="text/javascript"></script>

<script src="{{ url_for("static", filename="shared/jquery.hashchange-1.3/jquery.hashchange.min.js") }}" type="text/javascript"></script>

{% endblock %}

{% block content %}

{% if archive %}

<p class="back">

<a href="{{ url_for("page", name="archive") }}">{{ _("&lsaquo; Back to archive") }}</a>

</p>

{% endif %}

<div class="tabs">

{% for name, flow in flows.items() %}

<div class="{% if archive or flow.active %}active {% endif %}tab" id="{{ name }}">

{% if archive %}<h2>{{ flow.title }}</h2>{% endif %}

{{ flow.html }}

</div>

{% if archive and not loop.last %}<hr>{% endif %}

{% endfor %}

</div>

{% endblock %}

{% block extra_body %}

<script type="text/javascript"><!--

$(function() {

var tabs = $(".tabs .tab");

var activateTab = function() {

var activeTab = $(".tabs .tab.active");

var activeTabId = (activeTab.length) ? activeTab.attr("id") : "";

var linksFooter = $("footer a[id]"), linksNav = $("nav a[id]");

var makeLinkActive = function(i) {

var $this = $(this);

var linkId = $this.attr("id").split("-")[0];

(linkId == activeTabId) ? $this.addClass("active") : $this.removeClass("active");

};

if (location.hash) {

activeTabId = location.hash.substr(1);

activeTab.removeClass("active");

$(".tabs #" + activeTabId).addClass("active");

activeTab = $(".tabs .tab.active");

}

linksFooter.each(makeLinkActive);

linksNav.each(makeLinkActive);

}

$(window).hashchange(activateTab);

activateTab();

});

--></script>

{% endblock %}