demo: Add tabs to form examples

[people/ms/westferry.git] / src / templates / modules / tabs.html

{% import westferry.ui.forms %}
{% import westferry.ui.graphs %}

{#
	Render the tab navigation bar
#}
<ul class="tabs" data-tabs id="{{ tabs.id }}">
	{% for i, tab in enumerate(tabs) %}
		{#
			Select the first tab
		#}
		{% set selected = i == 0 %}

		<li class="tabs-title {% if selected %}is-active{% end %}">
			<a href="#{{ tab.id }}" {% if selected %}aria-selected="true"{% end %}>
				{{ tab.title }}
			</a>
		</li>
	{% end %}
</ul>

<div class="tabs-content" data-tabs-content="{{ tabs.id }}">
	{% for i, tab in enumerate(tabs) %}
		{#
			Select the first tab
		#}
		{% set selected = i == 0 %}

		<div class="tabs-panel {% if selected %}is-active{% end %}" id="{{ tab.id }}">
			{% for item in tab.items %}
				{% if isinstance(item, westferry.ui.forms.Form) %}
					{% module Form(item) %}
				{% elif isinstance(item, westferry.ui.graphs.Graph) %}
					{% module GraphBox(item, show_title=False) %}
				{% else %}
					{% module WarningBox(_("Unknown UI Element"),
						_("A UI element which was supposed to be at this place could not be rendered: %r") % item) %}
				{% end %}
			{% end %}
		</div>
	{% end %}
</div>