{{!
    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 format_remuiformat/list_sections


    Example context (json):
    {
      "sections": [
         {
            "index": "1",
            "title": "Section Title",
            "singlepageurl": "Single Page URL",
            "hiddenmessage": "Hidden message",
            "hidden": "1/0",
            "summary": "Summary",
            "activityinfostring": "2 Files, 2 Quizzes"
            "sectionactivities" [
               {
               }
            ]
         }
      ]
   }
}}

{{#addsection}}
<li id="{{divid}}" class="card clearfix " role="region" style="">
    <div class="content card-block  remui-list-content-border d-flex align-items-center">
        {{#numsections}}
            <a href="{{{addurl}}}" class="{{addurlclass}}">{{{addicon}}} {{{straddsection}}}</a>

            {{#strremovesection}}
            <a href="{{{removeurl}}}" class="{{removeurlclass}}">{{{removeicon}}} {{{strremovesection}}}</a>
            {{/strremovesection}}
        {{/numsections}}

        {{^numsections}}
            <a href="{{{url}}}" data-add-sections="{{{straddsections}}}">{{{icon}}} {{{straddsections}}}</a>
        {{/numsections}}
    </div>
</li>
{{/addsection}}

{{^addsection}}
<li id="section-{{{index}}}" class="card section main {{#collapsed}}collapsed{{/collapsed}} clearfix " role="region" aria-labelledby="section-{{index}} .sectionname a:not(.quickeditlink)">
    <div class="content card-block  remui-list-content-border" aria-labelledby="section-{{index}} .sectionname a:not(.quickeditlink)">
        <div class="course-section-summary-wrapper">
            <div class="left side float-left d-flex m-0 justify-content-between w-100">
                {{{ leftside }}}
            </div>
            <div class="course-section-header d-flex align-items-start" data-for="section_title">
                {{#leftside }}
                <div class="side left">
                    {{{ leftside }}}
                </div>
                {{/leftside }}
                <div class="d-flex flex-column name-progress-wrapper w-100 text-break">
                    <h3 class="sectionname card-title m-0 d-inline">
                        {{#editing}}
                            {{{ title }}}
                        {{/editing}}
                        {{^editing}}
                            <a class="panel-title p-0 " href="#sectionwrapper-{{{index}}}" aria-controls="sectionwrapper-{{{index}}}">{{{ title }}}
                        {{/editing}}
                        {{^editing}}
                            {{#progressinfo}}
                                {{#completed}}
                                <div class="float-right">
                                    <i class="fa fas fa-check-square text-success"></i>
                                </div>
                                {{/completed}}
                            {{/progressinfo}}
                            </a>
                        {{/editing}}
                        <div data-region="sectionbadges" class="sectionbadges d-inline {{^editing}}ml-2{{/editing}}">
                            {{!> core_courseformat/local/content/section/badges }}
                            {{>format_remuiformat/edwbadges}}
                        </div>
                    </h3>
                    {{#progressinfo}}
                    <div class="progress-bar-warpper">
                        <div class="progress progress-xs bg-grey-300 m-b-1">
                           <div class="progress-bar bg-green-600" style="width:{{#progressinfo}}{{ percentage }}{{/progressinfo}}{{^progressinfo}}0{{/progressinfo}}%;" role="progressbar">
                           </div>
                        </div>
                        <div class="text-right progress-text">
                           {{#progressinfo}}
                           {{! progress }}
                           {{/progressinfo}}
                           <span>{{#progressinfo}}{{ percentage }}{{/progressinfo}}{{^progressinfo}}0{{/progressinfo}}% {{#str}} Complete, format_remuiformat {{/str}}</span>
                        </div>
                     </div>
                     {{/progressinfo}}
                </div>
                <div class="side right d-flex ">

                    <button class="toggle-icon fa fa-angle-right ml-auto"></button>
                    {{{ addnewsection }}}
                    {{{ optionmenu }}}
                </div>
            </div>
            {{#summary}}<div class="summary card-text">{{{summary}}}</div>{{/summary}}
        </div>
        {{#hiddenmessage }}
        <div class="section_availability">
            {{{ hiddenmessage }}}
        </div>
        {{/hiddenmessage }}
        {{#availability}} <div class="section_availability badge badge-pill badge-info mb-10">{{{availability}}}</div>{{/availability}}
        {{#editing}}
            <div class="section-summary-activities mdl-right mb-2 p-24 pb-0 pt-0">{{{activityinfostring}}}</div>
        {{/editing}}
        {{#sectionactivities}}
        <div class=" card-footer text-muted border-0 " aria-labelledby="section-{{index}} .sectionname a:not(.quickeditlink)" {{#collapsed}}style="display: none;"{{/collapsed}}>
            {{{sectionactivities}}}
        </div>
        {{/sectionactivities}}
    </div>
</li>
{{/addsection}}
