{{!
    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 core_courseformat/local/content/sectionselector

    Displays the course section navigation.

    Example context (json):
    {
        "hasprevious": true,
        "previousurl": "#",
        "larrow": "&#x25C4;",
        "previousname": "Section 3",
        "hasnext": true,
        "rarrow": "&#x25BA;",
        "nexturl": "#",
        "nextname": "Section 5",
        "selector": "<select><option>Section 4</option></select>"
    }
}}
<div id="sectionnavigation-bottom" class="section-navigation mdl-bottom d-flex justify-content-between">
    <div class="prevsection d-flex">
        {{#hasprevious}}
            <a href="{{{previousurl}}}"
               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#previoushidden}} text-muted{{/previoushidden}}"
               data-action="previoussection"
               title="{{#str}}gotosection, format_cards, {{name}}{{/str}}">
                <span class="dir-ltr-hide">
                    {{#pix}}t/right, moodle, {{#str}}gotosection, format_cards, {{previousname}}{{/str}}{{/pix}}
                </span>
                <span class="dir-rtl-hide">
                    {{#pix}}t/left, moodle, {{#str}}gotosection, format_cards, {{previousname}}{{/str}}{{/pix}}
                </span>
                <span class="sr-only">
                    {{#str}}gotosection, format_cards, {{previousname}}{{/str}}
                </span>
            </a>
        {{/hasprevious}}
        {{#hasparent}}
            <a href="{{{parenturl}}}"
               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#parenthidden}} text-muted{{/parenthidden}}"
               data-action="parentsection"
               title="{{#str}}gotosection, format_cards, {{parentname}}{{/str}}">
                {{#pix}}t/up, moodle, {{#str}}gotosection, format_cards, {{parentname}}{{/str}}{{/pix}}
                <span class="sr-only">
                    {{#str}}gotosection, format_cards, {{parentname}}{{/str}}
                </span>
            </a>
        {{/hasparent}}
        {{#showcoursehome}}
            <a href="{{{courseurl}}}"
               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin"
               data-action="coursehomebutton"
               title="{{#str}} course {{/str}}">
                {{#pix}} i/home, core, {{#str}} maincoursepage {{/str}} {{/pix}}
            </a>
        {{/showcoursehome}}
    </div>
    <div>
        {{{selector}}}
    </div>
    <div class="nextsection">
        {{#hasnext}}
            <a href="{{{nexturl}}}"
               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#nexthidden}} text-muted{{/nexthidden}}"
               data-action="nextsection"
               title="{{#str}}gotosection, format_cards, {{nextname}}{{/str}}">
                <span class="dir-rtl-hide">
                    {{#pix}}t/right, moodle, {{#str}}gotosection, format_cards, {{nextname}}{{/str}}{{/pix}}
                </span>
                <span class="dir-ltr-hide">
                    {{#pix}}t/left, moodle, {{#str}}gotosection, format_cards, {{nextname}}{{/str}}{{/pix}}
                </span>
                <span class="sr-only">
                    {{#str}}gotosection, format_cards, {{nextname}}{{/str}}
                </span>
            </a>
        {{/hasnext}}
    </div>
</div>
