{% extends 'renderable.jinja' %}

{% block content %}

    {% for idx, fieldset in content.idx_tabs %}
        <input id="{{ content.name }}-{{ idx }}" class="tab-switch idx-{{ idx }}" type="radio" name="{{ content.prefix }}.{{ content.name }}" value="{{ fieldset.name }}" {% if content.value == fieldset.name %}checked{% endif %} />
    {% endfor %}

    <nav class="tab-nav">
        <ul>
        {% for idx, fieldset in content.idx_tabs %}
            <li><label for="{{ content.name }}-{{ idx }}" class="idx-{{ idx }}">{{ fieldset.title }}</label></li>
        {% endfor %}
        </ul>
    </nav>

    {% for idx, fieldset in content.idx_tabs %}
        <section class="tab idx-{{ idx }}">
            {{ fieldset.render() }}
        </section>
    {% endfor %}
    
{% endblock %}
