{{!
    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/>.
}}
{{!
   Admin Header Link with Icon
}}
<div class="rui-blocks-wrapper wrapper--with-margin wrapper-xl">
    <div class="wrapper-page-withblocks">
        <div class="card text-center">
                <div class="card-header">
                    <div class="nav btn-group d-inline-flex mx-auto" id="blocks_buttons"></div>
                </div>
                <div class="card-body">
                    <section class="d-print-none" aria-label="Bloques">
                        <div id="static-blocks" class="block-region tab-content d-none" data-droptarget="1">
                            <h2 class="sr-only">Bloques</h2>
                            {{{ blocks }}}
                        </div>
                    </section>
                </div>
        </div>
    </div>
</div>
{{#js}}
M.util.js_pending('theme_universe/loader');
require(['theme_universe/loader', 'jquery'], function(Loader, $) {
    M.util.js_complete('theme_universe/loader');

    function renderBlockButtons(){
        const buttonsContainer = $("#blocks_buttons");
        const blocksContainer = $(".block-region");
        const blocks = blocksContainer.find("section.block").toArray();

        const blocksObjs = []

        $(blocks).each((index, block) => {
            const blckId = $(block).attr("id").trim()
            const blckTitle = $(block).find(".card-title").text()

            $(block).addClass("tab-pane fade")
            if(index === 0) $(block).addClass("active show")

            const blckObj = { id: blckId, title: blckTitle }

            blocksObjs.push(blckObj)
        })

        blocksObjs.forEach(({ id, title }, index)=> {
            const blockBtn = `
                <button class="btn nav-link ${index === 0 ? 'active' : ''}" data-toggle="tab" data-target="#${id}" type="button" role="tab" aria-controls="nav-home" aria-selected="true">${title}</button>
            ` 

            buttonsContainer.append(blockBtn)
            $(blocksContainer).removeClass("d-none")
        })
    }

    renderBlockButtons()
});
{{/js}}