{{#count-completion}}
    <div class="courseindex-progress">
        <div class="courseindex-progress-text">{{#str}}
            progress_percentage, theme_boost_magnific{{/str}} {{percentage}}%
        </div>
        <div class="courseindex-progress-bar">
            <div class="courseindex-progress-mark" style="width:{{percentage}}%;"></div>
        </div>
    </div>
{{/count-completion}}

<h4>{{#str}}tableofcontents, theme_boost_magnific{{/str}}</h4>
<div id="courseindex-content">
    <div id="course-index" class="courseindex">

        {{#sessions}}
            <div class="courseindex-section dropready" id="course-index-section-{{{id}}}">

                <div class="courseindex-item d-flex courseindex-section-title dropready" id="courseindexsection0">
                    {{#count-completion}}
                        {{#hascompletion}}
                            <span data-hascompletion="{{{iscompletion}}}"
                                  class="completioninfo{{!
                                 }} {{#iscompletion}}completioninfo-ok{{/iscompletion}}{{!
                                 }} {{^iscompletion}}completioninfo-no-completion{{/iscompletion}}"></span>
                        {{/hascompletion}}
                    {{/count-completion}}
                    <a href="{{{config.wwwroot}}}/course/section.php?id={{id}}"
                    class="courseindex-link text-truncate dropready">{{name}}</a>
                </div>

                <div id="courseindexcollapse0" class="courseindex-item-content collapse show">
                    <ul class="courseindex-sectioncontent unlist">
                        {{#cms}}
                            <li class="courseindex-item d-flex dropready draggable"
                                id="course-index-cm-{{{cmid}}}">

                                {{#url}}
                                    {{#count-completion}}
                                        <span data-hascompletion="{{{hascompletion}}}"
                                              data-isautomatic="{{{isautomatic}}}"
                                              data-ismanual="{{{ismanual}}}"
                                              class="completioninfo {{{completion-class}}}"></span>
                                    {{/count-completion}}
                                    <a class="courseindex-url text-truncate" href="{{{url}}}">
                                        {{#iconurl}}
                                            <img src="{{iconurl}}" class="icon">
                                        {{/iconurl}}
                                        {{activityname}}
                                    </a>
                                {{/url}}
                                {{^url}}
                                    {{#count-completion}}
                                        <span class="completioninfo"></span>
                                    {{/count-completion}}
                                    <a class="courseindex-url text-truncate" href="#module-{{{cmid}}}">
                                        {{#iconurl}}
                                            <img src="{{iconurl}}" class="icon">
                                        {{/iconurl}}
                                        {{activityname}}
                                    </a>
                                {{/url}}
                                <i class="courseindex-locked ms-1 icon fa fa-lock fa-fw "></i>
                            </li>
                        {{/cms}}
                    </ul>
                </div>
            </div>
        {{/sessions}}
    </div>
</div>