{% for component in componentsData %}
    <div class="component" id="{{ component.title }}-link">
        <h2 class="title">{{ component.title | title }}</h2>
        <p class="desc blockquote">{{ component.desc }}</p>
        <div class="sample">
            <ul class="nav nav-tabs" id="{{ component.title }}Tab" role="tablist">
                {% for tab in master.tabs %}
                    <li class="nav-item">
                        <a class="nav-link {% if loop.index0==0  %} active {% endif %}" 
                            id="{{ component.title + '-' + tab }}-tab" data-toggle="tab" 
                            href="#{{ component.title + '-' + tab }}" role="tab" 
                            aria-controls="{{ component.title + '-' + tab }}" aria-selected="true">
                            {{ tab | title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
            <div class="tab-content" id="{{ component.title }}TabContent">
                <div class="tab-pane fade show active p-3" 
                    id="{{ component.title }}-view" role="tabpanel" aria-labelledby="view-tab">
                    <div class="bg-light p-2">
                        {% includeWith component.markup,component.data,false,false %}
                    </div>
                </div>
                <div class="tab-pane fade p-3" id="{{ component.title }}-html" role="tabpanel" aria-labelledby="html-tab">
                    <div class="bg-light p-2">
                        {% includeWith component.markup,component.data,false,true %}
                    </div>
                </div>
                <div class="tab-pane fade p-3" id="{{ component.title }}-laravel" role="tabpanel" aria-labelledby="laravel-tab">
                    <div class="bg-light p-2">
                        {{ "@include('webgets::" + component.title + "', ..." + component.title + "Data)" }}
                    </div>
                </div>
                <div class="tab-pane fade p-3" id="{{ component.title }}-angular" role="tabpanel" aria-labelledby="angular-tab">
                    <div class="bg-light p-2">
                        {% set ng = "<wg-" + component.title + " [" + component.title + "] = '" + component.title + "Data'></wg-" + component.title + ">" %}
                        {{ ng | escape }}
                    </div>
                </div>
                <div class="tab-pane fade p-3" id="{{ component.title }}-data" role="tabpanel" aria-labelledby="data-tab">
                    <div class="bg-light p-2">
                        {{ component.data | dump }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}