{% extends "layout.html" %}
{% block content %}
    <div class="row">
        <div class="col-12">
            <ul class="nav nav-tabs" role="tablist">
                {% for id_, tab in tabs.items() if id_ == 'info' or tab.buttons or tab.table.rows %}
                    {{ id_|tab_header(active=True if loop.first else False, table=tab.table) }}
                {% endfor %}
            </ul>
            <div class="tab-content">
                {% for id_, tab in tabs.items() if id_ == 'info' or tab.buttons or tab.table.rows %}
                    {% if loop.index == 1 %}
                        <div class="tab-pane fade show active" role="tabpanel" id="tab-{{ id_ }}">
                            {% block tab_info %}{% endblock%}
                        </div>
                    {% else %}
                        <div class="tab-pane fade" role="tabpanel" id="tab-{{ id_|replace('_', '-') }}">
                            {% if tab.buttons  %}
                                <div class="toolbar">
                                    {{ tab.buttons|join(' ') }}
                                </div>
                            {% endif %}
                            {% if tab.table.rows %}
                                {{ tab.table.display(id_)|safe }}
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}