{{!
    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 theme_snap/snap_feeds_mobile_menu

 @package   theme_snap
 @copyright Copyright (c) 202 Open LMS
 @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}

<div class="snap-feeds-mobile-menu">
    <div class="snap-feeds-header">
        <h4 class="mb-0 d-inline-block text-white">
            {{#str}}snapfeedsblocktitle, theme_snap{{/str}}
        </h4>

        <button type="button" class="close text-white font-weight-normal mt-1" aria-label="Close"
                onclick="document.getElementById('snap_feeds_side_menu_trigger').click()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="snap-feeds-mobile-sections p-5">
        {{#intelliboard.enable}}
            <div class="feed-section active" id="snap-feeds-section-intelliboard">
                {{{intelliboard.content}}}
            </div>
        {{/intelliboard.enable}}

        {{#intellicart.enable}}
            <div class="feed-section active" id="snap-feeds-section-intelliboard">
                {{{intellicart.content}}}
            </div>
        {{/intellicart.enable}}

        {{#deadlines.enable}}
            <div class="feed-section" id="snap-feeds-section-deadlines">
                {{{deadlines.content}}}
            </div>
        {{/deadlines.enable}}

        {{#grading.enable}}
            <div class="feed-section" id="snap-feeds-section-grading">
                {{{grading.content}}}
            </div>
        {{/grading.enable}}

        {{#messages.enable}}
            <div class="feed-section" id="snap-feeds-section-messages">
                {{{messages.content}}}
            </div>
        {{/messages.enable}}

        {{#forumposts.enable}}
            <div class="feed-section" id="snap-feeds-section-forumposts">
                {{{forumposts.content}}}
            </div>
        {{/forumposts.enable}}
    </div>

    <ul class="nav justify-content-around text-center">
        {{#intellienabled}}
            <li class="nav-item d-flex flex-column active" data-target="intelliboard">
                <a class="nav-link ib" href="#" style="mask: url('{{intelliboard.icon}}')">
                    <img alt="{{intelliboard.alt}}" src="{{intelliboard.icon}}">
                </a>
                <small>{{intelliboard.alt}}</small>
            </li>
        {{/intellienabled}}

        {{#deadlines.enable}}
            <li class="nav-item d-flex flex-column" data-target="deadlines">
                <a class="nav-link" href="#" style="mask: url('{{deadlines.icon}}')">
                    <img alt="{{deadlines.alt}}" src="{{deadlines.icon}}">
                </a>
                <small>{{deadlines.alt}}</small>
            </li>
        {{/deadlines.enable}}

        {{#grading.enable}}
            <li class="nav-item d-flex flex-column" data-target="grading">
                <a class="nav-link" href="#" style="mask: url('{{grading.icon}}')">
                    <img alt="{{grading.alt}}" src="{{grading.icon}}">
                </a>
                <small>{{grading.alt}}</small>
            </li>
        {{/grading.enable}}

        {{#messages.enable}}
            <li class="nav-item d-flex flex-column" data-target="messages">
                <a class="nav-link" href="#" style="mask: url('{{messages.icon}}')">
                    <img alt="{{messages.alt}}" src="{{messages.icon}}">
                </a>
                <small>{{messages.alt}}</small>
            </li>
        {{/messages.enable}}

        {{#forumposts.enable}}
            <li class="nav-item d-flex flex-column" data-target="forumposts">
                <a class="nav-link" href="#" style="mask: url('{{forumposts.icon}}')">
                    <img alt="{{forumposts.alt}}" src="{{forumposts.icon}}">
                </a>
                <small>{{forumposts.alt}}</small>
            </li>
        {{/forumposts.enable}}
    </ul>
</div>

{{#js}}
    require(['theme_snap/snap_feeds'], function(snap_feeds) {
    snap_feeds.init({{{urlparameter}}});
    });
{{/js}}