{{!
    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 core_courseformat/local/activitychooser/modchoosercontainer

    The activity chooser main container.

    Example context (json):
    {
        "uniqid": "123abc",
        "tabs": [
            {
                "tabId": "collaboration",
                "tabLabel": "Collaboration",
                "active": true,
                "displayed": true,
                "separator": false,
                "items": [
                    {
                        "label": "Option name",
                        "description": "Option description",
                        "urls": {
                            "addoption": "http://addoptionurl.com"
                        },
                        "icon": "<img class='icon' src='http://urltooptionicon' alt='icon'>",
                        "purpose": "content",
                        "branded": 0
                    }
                ]
            },
            {
                "tabId": "resources",
                "tabLabel": "Resources",
                "active": false,
                "displayed": true,
                "separator": true,
                "items": [
                    {
                        "label": "Option name",
                        "description": "Option description",
                        "urls": {
                            "addoption": "http://addoptionurl.com"
                        },
                        "icon": "<img class='icon' src='http://urltooptionicon' alt='icon'>",
                        "purpose": "content",
                        "branded": 0
                    }
                ]
            },
            {
                "tabId": "tools",
                "tabLabel": "Tools",
                "active": false,
                "displayed": false,
                "separator": false,
                "items": [
                    {
                        "label": "Option name",
                        "description": "Option description",
                        "urls": {
                            "addoption": "http://addoptionurl.com"
                        },
                        "icon": "<img class='icon' src='http://urltooptionicon' alt='icon'>",
                        "purpose": "content",
                        "branded": 0
                    }
                ]
            }
        ]
    }
}}
<div
    class="modchoosercontainer"
    data-region="chooser-container"
>
    <div class="modchooserfilters">
        <div class="searchcontainer mb-4 p-1">
            {{>core_courseformat/local/activitychooser/search}}
        </div>
    </div>
    <div
        class="nav nav-pills modchoosernav d-flex flex-row flex-md-column flex-nowrap gap-2 me-md-5"
        id="categories-{{uniqid}}"
        role="tablist"
    >
        {{! Tab navigation items }}
        {{#tabs}}
        <a
            class="nav-item nav-link {{#active}}active{{/active}} {{^displayed}} d-none disabled {{/displayed}}"
            id="{{tabId}}-tab-{{uniqid}}"
            data-bs-toggle="tab"
            data-region="{{tabId}}-tab-nav"
            href="#{{tabId}}-{{uniqid}}"
            role="tab"
            aria-controls="{{tabId}}-{{uniqid}}"
            aria-selected="{{#active}}true{{/active}}{{^active}}false{{/active}}"
        >
            {{tabLabel}}
        </a>
        {{#separator}}<hr class="d-none d-md-block ms-3" aria-hidden="true">{{/separator}}
        {{/tabs}}
    </div>
    <div
        class="modchoosercontent tab-content"
        id="tabbed-activities-{{uniqid}}"
        data-region="tabcontent"
        {{! We need to set tabindex to prevent Behat errors. }}
        tabindex="-1"
    >
        {{! Tab contents }}
        {{#tabs}}
        <div
            class="tab-pane {{#active}}active{{/active}}"
            id="{{tabId}}-{{uniqid}}"
            data-region="{{tabId}}"
            role="tabpanel"
            aria-labelledby="{{tabId}}-tab-{{uniqid}}"
        >
            {{>core_courseformat/local/activitychooser/tabcontent}}
        </div>
        {{/tabs}}
    </div>
</div>