{{!
    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/card_section_summary


    Example context (json):
    {
        "editing: "1/0",
        "defaultview: "1/0",
        "expanded: "1/0",
        "collapsed: "1/0",
        "user_id: "1",
        "courseid: "1",
        "generalsection": [
         {
            "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}}
<div id="{{divid}}" class=" col-lg-4 col-md-6 col-sm-6 section main clearfix">
    <div class="single-card 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>
</div>
{{/addsection}}

{{^addsection}}
<li id="section-{{{index}}}" class="section main clearfix {{#isdelegatedsection}}delegated-section {{/isdelegatedsection}}"
    aria-labelledby="section-{{{index}}} .content .sectionname"
    data-sectionid="{{id}}"
    data-sectionreturnid="{{sectionreturnid}}"
    data-for="section"
    data-number="{{num}}">
    <div class="single-card d-flex flex-column justify-content-between {{{remuinewthemecolor}}} {{#sectionfirstimage}}sectionfirstimage{{/sectionfirstimage}}"
        {{#sectionfirstimage}}style="background: linear-gradient({{remuidefaultsectionoverlay}}),url({{sectionfirstimage}});
                background-repeat: no-repeat;
                background-size: cover;"{{/sectionfirstimage}}>
        {{#highlighted}}
            <div class="highlight text-primary"></div>
        {{/highlighted}}
        <div class="editing-actions d-flex  justify-content-between align-items-center">
            <div class="left side mt-0">
                {{{ leftside }}}
            </div>
            <div class='right side mt-0 d-flex flex-gap-8'>
                {{{ addnewsection }}}
                {{{ optionmenu }}}
            </div>
        </div>
        <div class="content h-100">
            <div class="summary d-none">
            </div>
            {{#addnewsection}}
                <h2 class="sectionname m-0 d-flex flex-column bg-transparent text-clamp text-clamp-3" style="-webkit-box-orient: vertical;">{{{ title }}}
                </h2>
                <div data-region="sectionbadges" class="sectionbadges d-inline">
                    {{!> core_courseformat/local/content/section/badges }}
                    {{>format_remuiformat/edwbadges}}
                </div>
            {{/addnewsection}}
            {{^addnewsection}}
                <div class="section-header d-inline">
                    {{^hidden}}
                        <a href="{{{ singlepageurl }}}" class="align-middle">
                    {{/hidden}}
                        <h2 class="sectionname m-0 d-inline bg-transparent" style="-webkit-box-orient: vertical;">{{{ title }}}</h2>
                    {{^hidden}}
                        </a>
                    {{/hidden}}
                </div>
            {{/addnewsection}}
            {{#summary }}
            <div class="wdm-section-summary {{#hidden}}summary-muted{{/hidden}}">
                {{{ summary }}}
            </div>
            {{/summary }}
            <div class="section-activities-summary">
                {{#activityinfo}}
                    <span class="item {{#hidden}}text-muted{{/hidden}}">{{ . }}</span>
                {{/activityinfo}}
            </div>
            <ul class="section">
            </ul>
            {{#editsectionurl}}
                <a class="text-muted" href="{{ editsectionurl }}"><span><i class="fa fa-cog font-size-20" aria-hidden="true"></i></span></a>
            {{/editsectionurl}}
            {{#hiddenmessage}}
                {{{hiddenmessage}}}
            {{/hiddenmessage}}
        </div>
        {{#progressinfo}}
            <div class="section-action-container  progress-bar-warpper card-bottom d-flex {{^hidden}}text-primary{{/hidden}}{{#hidden}}text-muted{{/hidden}}">

                {{#percentage}}
                <div class="progress progress-xs bg-grey-300 w-100">
                    <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  w-100">
                    {{! progress }}
                    <span>{{#progressinfo}}{{{percentage}}}{{/progressinfo}}{{^progressinfo}}0{{/progressinfo}}% {{#str}} Complete, format_remuiformat {{/str}}
                    </span>
                </div>
                {{/percentage}}
                {{^percentage}}
                    {{{progress}}}
                {{/percentage}}

            </div>
        {{/progressinfo}}
    </div>
</li>
{{/addsection}}