{% set _items = [] %}
{% for key, item in items ?? [] %}
    {% if item.id is not defined %}
        {# Generate id of item for "Boostrap tab" #}
        {% set item = item|merge({id : tabler_unique_id()}) %}
    {% endif %}

    {% set _items = _items|merge({ (key) : item }) %}
{% endfor %}

{% block card_before %}{% endblock %}
<div class="card {% block card_class %}mb-3{% endblock %}">
    <div class="row g-0">

        {# Nav items #}
        {% block nav_before %}{% endblock %}
        <div class="{% block nav_size %}col-3{% endblock %} {% block nav_border %}border-end{% endblock %} {% block nav_display %}d-none d-md-block{% endblock %}">
            <div class="card-body">
                <div class="list-group {% block nav_list_class %}list-group-transparent{% endblock %}">
                    {% for key, item in _items %}

                        {% set _id = item.id %}
                        {% set _header = item.header ?? false %}
                        {% set _active = item.active ?? false %}
                        {% set _name = item.name ?? '' %}
                        {% set _url = item.url ?? ("#tabs-" ~ item.id) %}
                        {% set _raw = item.raw ?? false %}

                        {% if _header %}
                            <h4 class="subheader {% block nav_header_class %}mx-4 mt-3{% endblock %}">{{ _name }}</h4>
                        {% else %}
                            <a
                                    href="{{ _url }}"
                                    class="list-group-item list-group-item-action d-flex align-items-center {% if _active %}active{% endif %}"
                                    {% if item.url is not defined and not block('content') is defined %}data-bs-toggle="tab"{% endif %}
                            >
                                {% if _raw %}
                                    {{ _name | raw }}
                                {% else %}
                                    {{ _name }}
                                {% endif %}
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% block nav_after %}{% endblock %}

        {# Content #}
        {% block content_before %}{% endblock %}
        <div class="{% block content_size %}col{% endblock %} {% block content_display %}d-flex flex-column{% endblock %}">
            <div class="card-body">
                {% if block('content') is defined %}
                    {{ block('content') }}
                {% else %}
                    <div class="tab-content">
                        {% for key, item in _items %}

                            {% set _id = item.id %}
                            {% set _header = item.header ?? false %}
                            {% set _active = item.active ?? false %}
                            {% set _content = item.content ?? '' %}

                            {% if item.content is defined and not _header %}
                                <div class="tab-pane {% if _active %}active show{% endif %}"
                                     id="tabs-{{ _id }}"
                                     {% if item.url is not defined %}role="tabpanel"{% endif %}
                                >
                                    {{ _content|raw }}
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
        {% block content_after %}{% endblock %}

    </div>
</div>
{% block card_after %}{% endblock %}