{{!
    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/content/section/cmsummary

    Displays the activities summary of a section.

    Example context (json):
    {
        "showcompletion": true,
        "mods": [
            {
                "name": "Forums",
                "count": "3"
            },
            {
                "name": "Books",
                "count": "2"
            }
        ],
        "modprogress": "Total 5"
    }
}}
{{#modprogress}}
<div class="section-summary-activities d-flex flex-wrap">
    
    <div class="w-100">
        <div>
            {{#mods}}
            <span class="badge badge-xs badge-light">{{name}}: {{count}}</span>
            {{/mods}}
        </div>
    </div>

    {{#showcompletion}}
    <div class="rui-modprogress sr-only" id="rui-modprogress-{{id}}">
        {{modprogress}}
    </div>

    <div class="rui-course-progresschart w-100 bg-white rounded border p-2 px-3 mt-2">
        <div class="course-progressbar-wrapper">
            <div class="row no-gutters align-items-center">
                <div class="progressbar-container col">
                    <div class="rui-progress my-2">
                        <div class="rui-progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
                    </div>
                </div>

                <div class="rui-progress-count">
                    <svg class="icon mx-1" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.75 12C4.75 7.99594 7.99594 4.75 12 4.75V4.75C16.0041 4.75 19.25 7.99594 19.25 12V12C19.25 16.0041 16.0041 19.25 12 19.25V19.25C7.99594 19.25 4.75 16.0041 4.75 12V12Z"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 12.75L10.1837 13.6744C10.5275 14.407 11.5536 14.4492 11.9564 13.7473L14.25 9.75"></path>
                    </svg>
                    <div class="d-flex">
                    <div class="rui-progress-count-completed" data-id="{{id}}"><div class="count-completed-value"></div></div>
                    <span class="pl-1">/</span>
                    <div class="rui-progress-count-total d-flex"><div class="count-total-value"></div></div>
                </div>
            </div>
        </div>
    </div>
    {{/showcompletion}}
</div>
{{/modprogress}}
<hr />

