{{!
    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_general_section_edit


    Example context (json):
    {
        "editing: "1",
        "defaultview: "1/0",
        "expanded: "1/0",
        "collapsed: "1/0",
        "user_id: "1",
        "courseid: "1",
        "generalsection": [
         {
            "generalsectiontitle": "General Section Title",
            "activities": [
                {
                    "index": "index",
                    "id": "id",
                    "completion": "completion",
                    "viewurl": "viewurl",
                    "title": "title",
                    "modulename": "modulename",
                    "summary": "summary",
                    "completed": "completed",
                    "hidden": "hidden",
                    "availstatus": "availstatus",
                    "modicons": "modicons",
                }
            ],
            "generalsectionsummary": "General Section Summary",
         }
        ]
    }
}}
<li id="section-0" class="first-section-li section main clearfix mb-25 mb-4" role="region" aria-label="{{{generalsectiontitlename}}}">
    <div class="general-section">
        {{>format_remuiformat/optional_secheader}}
        <div class="section-details">
            <div class="coursedetails">
                <div class="details">
                    {{#coursemainimage}}
                        <div class="col-12 coursemainimagediv text-right d-md-block mb-4">
                            <div class="coursemainimage" style="background-image: url('{{coursemainimage}}');"></div>
                        </div>
                    {{/coursemainimage}}
                    {{> format_remuiformat/course_progress }}
                    {{#resumeactivityurl}}
                        <div class="col-12 text-center mt-4">
                            <a class="btn btn-primary btn-block bold" href="{{{ resumeactivityurl }}}" role="button">{{#str}} resumetoactivity, format_remuiformat{{/str}}</a>
                        </div>
                    {{/resumeactivityurl}}
                </div>
            </div>
            <div class="generaldetails content">
                <div class="left side">
                    {{{ leftsection }}}
                </div>
                <div class="right side">
                    {{{ optionmenu }}}
                </div>
                <h2 class="section-title">{{{ title }}}</h2>
                <div class='generalsectioninfo'>
                    {{{ availability }}}
                    {{#fullsummary}}
                        <input type="checkbox" class="read-more-state" id="read-more-summary" />
                        <div class="read-more-target">{{{ fullsummary }}}</div>
                        <div class="fadeout-summary"></div>
                        <label for="read-more-summary" class=" text-primary small read-more-trigger"></label>
                    {{/fullsummary}}
                </div>
                <a class="text-muted" href="{{ editsetionurl }}"><span><i class="fa fa-cog font-size-20" aria-hidden="true"></i></span></a>
            </div>
        </div>
        {{#activityexists}}
            <h4 class="activitieshead">{{#str}} generalactivities, format_remuiformat{{/str}}</h4>
        {{/activityexists}}
        <div class="content">
            <div class="summary"></div>
            <ul class="img-text section general-section-activities justify-content-start text-center yui3-dd-drop" data-draggroups="resource">
                {{#activities}}
                    <li class="activity {{{modulename}}} modtype_{{{modulename}}} justify-content-center list-unstyled yui3-dd-drop" id="module-{{id}}" data-draggroups="resource">
                        <div>
                            <div class="activityinstance p-0 d-inline-block">
                                {{{title}}}
                                <span class="pl-10"><span class="editing_move moodle-core-dragdrop-draghandle" title="{{#str}} moveresource, format_remuiformat {{/str}}" tabindex="0" data-draggroups="resource" role="button" data-sectionreturn="0"><i class="icon fa fa-arrows fa-fw  iconsmall" aria-hidden="true" aria-label="" style="cursor: move;"></i></span></span>
                            </div>
                            <div data-region="sectionbadges" class="sectionbadges d-flex align-items-center {{^editing}}ml-2{{/editing}}">
                                {{!> core_courseformat/local/content/section/badges }}
                                {{>format_remuiformat/edwbadges}}
                            </div>
                            <div class="actions">
                                {{{completion}}}
                                {{{modicons}}}
                            </div>
                            <div class="contentafterlink">
                                {{{summary}}}
                            </div>
                            {{{availstatus}}}
                        </div>
                    </li>
                {{/activities}}
            </ul>
        </div>

        <div class="text-center showactivitywrapper">
            <span class="showactivity text-primary show">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </span>
        </div>
        {{{addnewactivity}}}
    </div>
   <div class="px-15 py-10 px-3 p-x-1 py-2 p-y-1 course-cover-image" style="background-image: linear-gradient(to right, rgba(14, 35, 53, 0.68), rgba(14, 35, 53, 0.68)), url({{{remuicourseimage}}});">
    {{#rightside}}
    <div class="right side">
        {{{rightside}}}
    </div>
    {{/rightside}}
        <div class="text-white">
            <h2 class="section-title">
                {{{generalsectiontitle}}}
            </h2>
            <div class="font-size-14 summary">{{{ generalsectionsummary }}}</div>
        </div>
        <div class="text-white mb-10 m-b-1 d-flex" style="justify-content: flex-end;">
            {{#teachers}}
                {{{teacherimg}}}
            {{/teachers}}
        </div>
        {{#percentage}}
            <div class="progress progress-square mb-0">
                <div class="progress-bar bg-green-600" style="width: {{{percentage}}}%; height: 100%;" role="progressbar">
                    <span class="sr-only">{{{percentage}}}% {{#str}} Complete, format_remuiformat {{/str}}</span>
                </div>
            </div>
        {{/percentage}}
   </div>

   <span class="hidden sectionname">{{{generalsectiontitlename}}}</span>

   <div class="content" aria-label="{{{generalsectiontitlename}}}">
        <div class="section_availability badge badge-pill badge-info mb-10"></div>
            <div class="summary hide"></div>
            <ul class="section general-section-activities img-text row justify-content-start text-center">
                {{#activities}}
                    <li class="activity first-section-activity modtype_{{{modulename}}} yui3-dd-drop" id="module-{{id}}">
                        <div>
                            <span class="editing_move moodle-core-dragdrop-draghandle" title="{{#str}} moveresource, format_remuiformat {{/str}}" tabindex="0" data-draggroups="resource" role="button" data-sectionreturn="0"><i class="icon fa fa-arrows fa-fw  iconsmall" aria-hidden="true" aria-label="" style="cursor: move;"></i></span>
                            <div class="mod-indent-outer w-100">
                                {{#indent}}
                                    <div class="{{{indent}}}"></div>
                                {{/indent}}
                                <div>
                                    <div class="activityinstance p-0 d-inline-block contentafterlink">
                                        {{{title}}}
                                    </div>
                                    <div data-region="sectionbadges" class="sectionbadges d-flex align-items-center {{^editing}}ml-2{{/editing}}">
                                        {{!> core_courseformat/local/content/section/badges }}
                                        {{>format_remuiformat/edwbadges}}
                                    </div>
                                    <div class="actions">
                                        {{{completion}}}
                                        {{{modicons}}}
                                    </div>
                                </div>
                                {{{availstatus}}}
                            </div>
                        </div>
                    </li>
                {{/activities}}
            </ul>
        <div class="text-center showactivitywrapper">
            <span class="showactivity text-primary show">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </span>
        </div>
        {{{addnewactivity}}}
    </div>
</li>
