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


    Example context (json):
    {
        "section": "1",
        "leftnav": "1/0",
        "rightnav": "1/0",
        "leftside": "leftside options"
        "optionmenu": "rightside optionmenu"
        "title": "General Section 1",
        "summary": "General Section summary",
        "activities": [
         {
            "index": "index",
            "id": "id",
            "completion": "completion",
            "viewurl": "viewurl",
            "title": "title",
            "modulename": "modulename",
            "modulefullname": "Module full name",
            "summary": "summary",
            "completed": "completed",
            "hidden": "hidden",
            "availstatus": "availstatus",
            "modicons": "modicons",
         }
        ],
        "addnewactivity": "1/0",
        "remuicourseformatcard": "1/0",
    }
}}

{{#hiddensection}}
    {{{ hiddensection }}}
{{/hiddensection}}
{{^hiddensection}}

<div id="card-editing-container" class="remui-format-card single-section-format row ">
    {{#headerdata}}
    {{>format_remuiformat/optional_secheader}}
    {{/headerdata}}
    <ul class="sections">
        <li id="section-{{section}}" class="section main" aria-labelledby="{{uniqid}}" data-sectionid="{{ section }}"
            data-courseid="{{ courseid }}">
            <div class="section-details d-flex flex-column justify-content-between flex-wrap">
                <div class=" general-single-card p-0 d-flex">
                    <div class="d-flex header-progresbar-wrapper">
                        <h2 class="section-title m-0 d-flex">
                            {{! sno is shown on section page but now it's hidden because of subsection makes it confusing }}
                            {{#comment}}
                                <span class="sno {{#hidden}}text-muted{{/hidden}}">
                                    {{ section }}&#46;
                                </span>
                            {{/comment}}

                            <span id="{{uniqid}}"
                                class="single-section-title d-inline {{#hidden}}text-muted{{/hidden}}">
                                {{{title}}}
                                <div data-region="sectionbadges "
                                    class="sectionbadges d-inline ">
                                    {{!> core_courseformat/local/content/section/badges }}
                                    {{>format_remuiformat/edwbadges}}
                                </div>
                            </span>
                        </h2>
                        {{#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}}%</span>
                            </div>
                        </div>
                        {{/progressinfo}}
                    </div>
                    <div class="d-flex justify-content-between flex-gap-16">
                        <!-- next/prev sections -->
                        <div class="d-flex no-wrap flex-gap-8">
                            <div class=" p-0 wdm-card-section m-0 text-nowrap align-items-center">
                                {{#leftnav}}
                                    <div class="card-section-leftnav">
                                        {{{ leftnav }}}
                                    </div>
                                {{/leftnav}}
                                {{#rightnav}}
                                    <div class="card-section-rightnav">
                                        {{{ rightnav }}}
                                    </div>
                                {{/rightnav}}
                            </div>
                            {{#editing}}
                            <div class="right side mt-0">
                                {{{ optionmenu }}}
                            </div>
                            {{/editing}}
                        </div>
                    </div>
                </div>
                {{#summary }}
                <p>{{{ summary }}}</p>
                {{/summary }}
            </div>
            <div class="content">
                <div class="summary">
                </div>
                <ul class="activity-cards section yui3-dd-drop">
                    {{#activities}}

                    {{^isdelegatedsection}}
                    <li class="activity {{#layouttypecol}}col-activity{{/layouttypecol}} {{#layouttyperow}}row-activity fullwidth-grid-item{{/layouttyperow}} modtype_{{{modulename}}}"
                        id="module-{{id}}" data-id="{{ id }}" data-section="{{ section }}"
                        aria-labelledby="module-{{id}}-title">
                        <div class="single-card">
                            <div class="d-flex flex-column single-card-child-wrapper">
                                {{#editing}}
                                {{{move}}}
                                {{/editing}}
                                <!-- <div class="wdm-mod-name {{#hidden}}text-muted{{/hidden}}">{{ modulefullname }}</div> -->
                                {{#editing}}
                                <div class="actions d-inline-flex actions flex-gap-8">
                                    <span class="toggle-row-column btn btn-inverse" data-activityid="{{ id }}">
                                        <span class='type-col'>
                                            {{# pix }}
                                            ecf-cols, format_remuiformat,
                                            {{# str }} showincard, format_remuiformat {{/ str }}
                                            {{/ pix }}
                                        </span>
                                        <span class='type-row'>
                                            {{# pix }}
                                            ecf-rows, format_remuiformat,
                                            {{# str }} showinrow, format_remuiformat {{/ str }}
                                            {{/ pix }}
                                        </span>
                                    </span>
                                    {{{ modicons }}}
                                </div>
                                {{/editing}}
                                {{#title}}
                                <h4 id="module-{{id}}-title" class="title {{^summary}}nosummary{{/summary}} m-0">
                                    {{{ title }}}
                                </h4>
                                {{/title}}
                                {{#modhiddenfromstudents}}
                                <div data-region="sectionbadges" class="sectionbadges d-flex align-items-center {{^editing}}{{/editing}}">
                                    {{!> core_courseformat/local/content/section/badges }}
                                    {{>format_remuiformat/edwbadges}}

                                </div>
                                {{/modhiddenfromstudents}}
                                {{#modstealth}}
                                <div class="mt-2 d-flex align-items-center">
                                    <span
                                        class="badge badge-pill badge-warning">{{#str}}hiddenoncoursepage{{/str}}</span>
                                </div>
                                {{/modstealth}}

                                {{#summary}}
                                <div class="activity-content">
                                        {{#label}}
                                            {{{ fullcontent }}}
                                        {{/label}}
                                        {{^label}}
                                            {{{ summary }}}
                                        {{/label}}
                                </div>
                                {{/summary}}
                            </div>
                            {{#hasopenduedata}}
                            <div class="description text-left">
                                <div data-region="activity-dates" class="activity-dates small course-description-item">
                                    <div class="description-inner">
                                        {{#opendue}}
                                        <div>
                                            <strong>{{label}}</strong> {{timestamp}}
                                        </div>
                                        {{/opendue}}
                                    </div>
                                </div>
                            </div>
                            {{/hasopenduedata}}
                            {{#completion}}
                            <div
                                class="completion-container {{#manualcompletion}}manual-completion{{/manualcompletion}} align-items-center pr-15 p-r-1 {{^completed}}text-muted{{/completed}}">
                                <div class="completion-check-{{id}}">
                                    {{{ completion }}}
                                </div>
                            </div>
                            {{/completion}}
                            {{#availstatus}}
                                <div class="{{^summary}}nosummary{{/summary}}">{{{ availstatus }}}</div>
                            {{/availstatus}}

                        </div>
                    </li>
                    {{/isdelegatedsection}}
                    {{^editing}}
                        {{#isdelegatedsection}}
                            {{>format_remuiformat/card_section_summary}}
                        {{/isdelegatedsection}}
                    {{/editing}}
                    {{#editing}}
                        {{#isdelegatedsection}}
                            {{>format_remuiformat/card_section_summary_edit}}
                        {{/isdelegatedsection}}
                    {{/editing}}
                    {{/activities}}
                </ul>
            </div>
            {{{ addnewactivity }}}
        </li>
        {{#sections}}
        <li id="section-{{index}}" class="section hide">
            <div class="content">
                <div class="sectionname">
                    <h2>
                        {{name}}
                    </h2>
                </div>
                <div class="summary">

                </div>
            </div>
        </li>
        {{/sections}}
    </ul>
</div>

<!-- next/prev sections -->
<div class="col-md-12 p-0 wdm-card-section">
    <div class="card-section-leftnav">
        {{{ leftnav }}}
    </div>
    <div class="card-section-rightnav">
        {{{ rightnav }}}
    </div>
</div>
{{/hiddensection}}
