{{!
    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_summary


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

<li id="section-{{{index}}}" class="card section 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-header d-flex flex-column" data-for="section_title">
         <div class="left side float-left d-flex m-0 justify-content-between w-100">
            {{{ leftside }}}
            <h3 class="sectionname card-title m-0 d-inline">
               <a class="panel-title p-0 sectionheading" href="{{{ singlepageurl }}}"
                  aria-expanded="{{#collapsed}}false{{/collapsed}}{{#expanded}}true{{/expanded}}"
                  aria-controls="sectionwrapper-{{{index}}}">{{{ title }}}
                  {{#progressinfo}}
                  {{#completed}}
                  <!-- Default checked -->
                  <div class="float-right">
                     <i class="fa fas fa-check-square text-success"></i>
                     <!-- {{{ progress }}} -->
                  </div>
                  {{/completed}}
                  {{/progressinfo}}
               </a>
               <div data-region="sectionbadges" class="sectionbadges ml-2 d-inline">
                  {{> core_courseformat/local/content/section/badges }}
               </div>
            </h3>

         </div>

         {{#checkrightsidecontent}}
         <div class="right side float-right d-flex align-items-center">
            {{#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}}
            {{#editing}}
            <div class="d-flex">
               {{{ addnewsection }}}
               {{{ optionmenu }}}
            </div>
            {{/editing}}
         </div>
         {{/checkrightsidecontent}}
      </div>
      <div class="availability-summary-wrapper">
         {{#hiddenmessage}}
            <div class="section_availability">
               {{{ hiddenmessage }}}
            </div>
         {{/hiddenmessage}}
         {{#summary}}
            <div class="summary card-text {{#expanded}}hide{{/expanded}}"> {{{summary}}}</div>
         {{/summary}}
         {{#availability}}
            <div class="section_availability badge badge-pill badge-info mb-10">
               {{{availability}}}
            </div>
         {{/availability}}
          {{#editing}}
            <div class="section-summary-activities text-left {{#expanded}}hide{{/expanded}} p-24">{{{activityinfostring}}}</div>
          {{/editing}}
      </div>
   </div>
</li>
