{{!
    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 theme_degrade/quickstart/footer

    Example context (json):
    {
        "footer_background_color":  "#f0f",
        "htmlselect":  "<div options...",
        "blocks":  [
            {
                "num":  1,
                "active":  true,
                "footer_title":  "Block title...",
                "footer_html":  "<div footer..."
            }, {
                "num":  2,
                "footer_title":  "Block title...",
                "footer_html":  "<div footer..."
            }, {
                "num":  3,
                "footer_title":  "Block title...",
                "footer_html":  "<div footer..."
            }, {
                "num":  4,
                "footer_title":  "Block title...",
                "footer_html":  "<div footer..."
            },
        ],
        "tyni_editor_config":  "{json}",
        "return":  "accessibility"
    }
}}

<div class="quickstart-collapse" id="footer">
    <a href="#footer" style="background: linear-gradient(135deg, #232526 0%, #414345 100%);">
        <span class="material-icons">web_asset</span>
        <span>{{#str}}footersettings,theme_degrade{{/str}}</span>
    </a>

    <div class="content">
        <div class="inner-content">
            <div class="settings-content">

                <div class="card mb-3">
                    <div class="card-header">
                        <h5>{{#str}}footer_background_color, theme_degrade{{/str}}</h5>
                    </div>
                    <div class="card-body">
                        <input type="text" class="form-control" id="id_footer_background_color"
                               name="footer_background_color" value="{{{footer_background_color}}}">
                        <div class="form-text text-muted">
                            {{#str}}footer_background_color_desc, theme_degrade{{/str}}
                            {{{htmlselect}}}
                        </div>
                    </div>
                </div>

                <h5>{{#str}}footer_heading_description_title, theme_degrade{{/str}}</h5>
                <p>{{#str}}footer_heading_description_desc, theme_degrade{{/str}}</p>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-pills" id="footerTab" role="tablist">
                    {{#blocks}}
                        <li class="nav-item" data-block="{{{num}}}">
                            <button class="nav-link {{#active}}active{{/active}}"
                                    id="footer-tab-{{{num}}}" data-bs-toggle="tab"
                                    data-bs-target="#footer{{{num}}}" type="button" role="tab" aria-controls="footer{{{num}}}"
                                    aria-selected="{{#active}}true{{/active}}{{^active}}false{{/active}}">
                                {{#str}}footer_heading, theme_degrade, {{{num}}}{{/str}}
                            </button>
                        </li>
                    {{/blocks}}
                </ul>

                <!-- Tab panes -->
                <div class="tab-content" id="footerTabContent">
                    {{#blocks}}
                        <div class="tab-pane fade {{#active}}show active{{/active}}" id="footer{{{num}}}"
                             role="tabpanel" data-block="{{{num}}}" aria-labelledby="footer-tab-{{{num}}}">
                            <div class="card">
                                <div class="card-body">
                                    <h5>{{#str}}footer_title, theme_degrade, {{{num}}} {{/str}}</h5>
                                    <input type="text" class="form-control" id="footer_title_{{{num}}}"
                                           name="footer_title_{{{num}}}" value="{{{footer_title}}}">
                                    <div class="form-text text-muted">
                                        {{#str}}footer_title_desc, theme_degrade{{/str}}
                                    </div>

                                    <h5 class="mt-2">{{#str}}footer_html, theme_degrade, {{{num}}} {{/str}}</h5>
                                    <textarea class="form-control" id="footer_html_{{{num}}}" style="height:300px"
                                              name="footer_html_{{{num}}}">{{{footer_html}}}</textarea>
                                    <div class="form-text text-muted">
                                        {{#str}}footer_html_desc, theme_degrade{{/str}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/blocks}}
                </div>
            </div>

            {{> theme_degrade/quickstart/btn-next-back }}
        </div>
    </div>
</div>
{{#js}}
    require(["jquery"], function($) {
        create___editor_tiny_editor( "footer_html_1" );
        create___editor_tiny_editor( "footer_html_2" );
        create___editor_tiny_editor( "footer_html_3" );
        create___editor_tiny_editor( "footer_html_4" );

        function create___editor_tiny_editor( elementId ){
            M.util.js_pending( "editor_tiny/editor" );
            require( [ "editor_tiny/editor" ], ( tiny ) => {
                tiny.setupForElementId( {
                    elementId : elementId,
                    options   : {{{tyni_editor_config}}},
                } );
                M.util.js_complete( "editor_tiny/editor" );
            } );
        }
    });
{{/js}}
