{% extends 'renderable.jinja' %}

{% block content %}
        {% for idx, label in content.idx_labels %}
            <input id="{{ content.name }}-{{ idx }}" class="tab-switch idx-{{ idx }}" type="radio" name="{{ content.name }}" value="{{ idx }}" {% if loop.first %}checked{% endif %} />
        {% endfor %}

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

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