{{!
    This file is part of Moodle - https://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 format_ludilearn/filename

    Example context (json):
    {}
}}

<div id="ludilearn-badge-section" class="section-badge">
    <div class="row">
        <div class="col-sm-12 col-md-6  rightlined">
            <h4 class="text-center">{{ name }}</h4>
            <div class="row mr-1">
                {{#parameters.gamified}}
                <div class="col-3 mt-0 p-0">
                    <div data-for="ludilearn-section-bronzecount" class="text-center mb-1 badge-number
                        {{#parameters.bronzecount }} badge-number-bronze spinning {{/parameters.bronzecount}}">
                        {{ parameters.bronzecount }}
                    </div>
                    <img data-for="ludilearn-section-bronzeimg" class="ludilearn-img little-img img-responsive d-block mx-auto"
                        {{#parameters.bronzecount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_bronze.svg"
                        {{/parameters.bronzecount}}
                        {{^parameters.bronzecount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_bronze_none.svg"
                        {{/parameters.bronzecount }}
                         alt="Image badge">
                </div>
                <div class="col-3 mt-0 p-0">
                    <div data-for="ludilearn-section-silvercount" class="text-center mb-1 badge-number
                        {{#parameters.silvercount }} badge-number-silver spinning {{/parameters.silvercount}}">
                        {{ parameters.silvercount }}
                    </div>
                    <img data-for="ludilearn-section-silverimg" class="ludilearn-img little-img img-responsive d-block mx-auto"
                        {{#parameters.silvercount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_silver.svg"
                        {{/parameters.silvercount}}
                        {{^parameters.silvercount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_silver_none.svg"
                        {{/parameters.silvercount }}
                         alt="Image badge">
                </div>
                <div class="col-3 mt-0 p-0">
                    <div data-for="ludilearn-section-goldcount" class="text-center mb-1 badge-number
                        {{#parameters.goldcount }} badge-number-gold spinning {{/parameters.goldcount}}">
                        {{ parameters.goldcount }}
                    </div>
                    <img data-for="ludilearn-section-goldimg" class="ludilearn-img little-img img-responsive d-block mx-auto"
                        {{#parameters.goldcount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_gold.svg"
                        {{/parameters.goldcount}}
                        {{^parameters.goldcount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_gold_none.svg"
                        {{/parameters.goldcount }}
                         alt="Image badge">
                </div>
                <div class="col-3 mt-0 p-0">
                    <div data-for="ludilearn-section-completioncount" class="text-center mb-1 badge-number
                    {{#parameters.completioncount }} badge-number-bronze spinning {{/parameters.completioncount}}">
                        {{ parameters.completioncount }}
                    </div>
                    <img data-for="ludilearn-section-completionimg" class="ludilearn-img little-img img-responsive d-block mx-auto"
                        {{#parameters.completioncount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_completion.svg"
                        {{/parameters.completioncount}}
                        {{^parameters.completioncount }}
                         src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_completion_none.svg"
                        {{/parameters.completioncount }}
                         alt="Image badge">
                </div>
                {{/parameters.gamified}}
                {{^parameters.gamified}}
                <div class="col-12">
                    <img class="ludilearn-img img-responsive d-block mx-auto" src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/none.svg" alt="Image no gamified">
                </div>
                {{/parameters.gamified}}
            </div>
            <div data-for="ludilearn-section-summary" class="section-summary">
                {{{ summary }}}
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="row">
                {{#cms}}
                    {{#label}}
                        <div class="col-12 mt-2">
                            <div class="cm-score" data-for="ludilearn-section-cm-labeltext">
                                {{{ labeltext }}}
                            </div>
                        </div>
                    {{/label}}
                    {{^label}}
                        <div class="col-6 col-sm-4 col-md-4 col-lg-4">
                            <div class="cm-badge">
                                <div class="{{#parameters.restricted }}restricted{{/parameters.restricted}} {{^url}} nourl {{/url}}" data-for="ludilearn-section-cm" data-id="{{id}}">
                                    <img class="{{#parameters.restricted }}restricted{{/parameters.restricted }} img-responsive mb-1 d-block mx-auto"
                                         data-for="ludilearn-section-cm-badge" data-id="{{id}}"
                                        {{#parameters.gamified }}src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_{{ parameters.badge }}.svg" {{/parameters.gamified }}
                                        {{^parameters.gamified }}src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/none.svg" {{/parameters.gamified }}
                                         alt="Image badge">

                                    {{#parameters.gamified }}
                                    {{#parameters.completion}}
                                        <div class="badgecompletion" data-for="ludilearn-section-cm-completion" data-id="{{id}}">
                                            <img src="{{config.wwwroot}}/course/format/ludilearn/pix/{{ world }}/badge/badge_completion.svg" alt="Icon completion">
                                        </div>
                                    {{/parameters.completion}}
                                    {{/parameters.gamified }}
                                    <p class="text-center scoretext">
                                        <span class="cmname"><a href="{{ url }}" class="stretched-link" data-for="ludilearn-section-cm-name" data-for="{{id}}">{{{ name }}}</a></span>
                                    </p>
                                    {{#parameters.restricted }}
                                        <div class="cmrestrictedinfo text-center small"><i class="fa fa-lock"></i> {{{ parameters.restrictedinfo }}}</div>
                                    {{/parameters.restricted }}
                                </div>
                            </div>
                        </div>
                    {{/label}}
                {{/cms}}
            </div>
        </div>
    </div>
</div>
{{> format_ludilearn/components/section }}
