{{!
    This file is part of Moodle - http://moodle.org/
    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template filter_tabs/bootstrap4

    Template to display tabs using Bootstrap 4.

    Classes required for JS:
    * 'filter-tabs-bootstrap' - to identify tabs as one of ours.

    Data attributes required for JS:
    * none

    Example context (json):
    {
        "tabgroupcounter": "1",
        "tabs": [ { "title": "header", "content": "body", "key": 1, "active": "active" } ]
    }
}}
<div id="filter-tabs-tabgroup-{{tabgroupcounter}}" class="filter-tabs-bootstrap boots-tabs">
    <ul id="filter-tabs-titlegroup-{{tabgroupcounter}}" class="nav nav-tabs" role="tablist">
        {{#tabs}}
            <li class="nav-item">
                <a class="nav-link {{get_active}}" href="#filter-tabs-content-{{tabgroupcounter}}-{{get_key}}" data-toggle="tab" role="tab" aria-controls="filter-tabs-content-{{tabgroupcounter}}-{{get_key}}">{{get_title}}</a>
            </li>
        {{/tabs}}
    </ul>
    <div id="filter-tabs-content-{{tabgroupcounter}}" class="tab-content">
        {{#tabs}}
            <div id="filter-tabs-content-{{tabgroupcounter}}-{{get_key}}" class="tab-pane fade in {{get_active}}" role="tabpanel">
                <ul id="filter-tabs-titlegroup-{{tabgroupcounter}}-printable" class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <span class="nav-link active">{{get_title}}</span>
                    </li>
                </ul>
                {{{get_content}}}
            </div>
        {{/tabs}}
    </div>
</div>