{% macro render_tabbed_view(view) %}
    {% from "widgets/widget_renderer.html.j2" import render_widget %}

    <div class="card mb-3">
        <div class="card-header">
            <!-- Tab Navigation - Enhanced with Tabler.io styling -->
            <ul class="nav nav-tabs card-header-tabs p-0" data-bs-toggle="tabs" role="tablist">
                {% for tab in view.tabs %}
                    <li class="card-title nav-item" role="presentation">
                        <a href="#{{ tab.widget_id }}"
                           class="nav-link {% if loop.first %}active{% endif %}"
                           data-bs-toggle="tab"
                           aria-selected="{% if loop.first %}true{% else %}false{% endif %}"
                           role="tab">
                            {% if tab.title_icon %}
                                <i class="{{ tab.title_icon }} me-1"></i>
                            {% endif %}
                            {{ tab.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Tab Content - Enhanced with Tabler.io styling -->
        <div class="card-body p-0">
            <div class="tab-content">
                {% for tab in view.tabs %}
                    <div id="{{ tab.widget_id }}" 
                         class="tab-pane fade {% if loop.first %}active show{% endif %}" 
                         role="tabpanel">
                        <div>
                            {{ render_widget(tab, request, 1) }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endmacro %}
