{% trans_default_domain 'admin' %}

<ul class="nav nav-tabs" id="myTab" role="tablist">
    {% for category in this.tree %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {{- loop.first ? ' active' }}" id="{{ category.id }}--tab"
                    data-bs-toggle="tab" data-bs-target="#{{ category.id }}--tab-pane"
                    type="button" role="tab" aria-controls="{{ category.id }}--tab-pane" aria-selected="true">
                {{- category.label -}}
            </button>
        </li>
    {% endfor %}
</ul>
<div class="tab-content" id="myTabContent">
    {% for category in this.tree %}
        <div class="tab-pane fade show {{- loop.first ? ' active' }}" id="{{ category.id }}--tab-pane"
             role="tabpanel" aria-labelledby="{{ category.id }}--tab" tabindex="{{ loop.index }}">

            <h6 class="my-4">{{ category.label }}</h6>

            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th scope="col">{{ 'field.language' | trans }}</th>
                    <th scope="col">{{ 'field.country' | trans }}</th>
                    <th scope="col">{{ 'field.status' | trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for language in category.children %}
                    {% for country in language.children %}
                        <tr>
                            {% if loop.first %}
                                <td rowspan="{{ language.children | length }}">
                                    <a href="{{ language.url }}">
                                        {{- language.label -}}
                                    </a>
                                </td>
                            {% endif %}
                            <td>
                                <a href="{{ country.url }}">
                                    {{- country.label -}}
                                </a>
                            </td>
                            <td>
                                <ul class="list-inline m-0">
                                    {% for status in country.children %}
                                        <li class="list-inline-item">
                                            <a href="{{ status.url }}" class="btn btn-secondary">
                                                {{- status.label -}}
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </td>
                        </tr>
                    {% endfor %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endfor %}
</div>