{{!
    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_thinkera/quicklinks

    The floating quick links, mobile first. On a phone: one round button in the corner (above the tab bar when there
    is one); with one link it is the link itself, with more it opens a short list (a <details>, so it works without
    JavaScript). From tablet width up: the links themselves, labelled.

    Example context (json):
    { "label": "Quick links", "single": false, "abovetabbar": false,
      "first": {"url": "#", "label": "Learning journey", "isjourney": true, "external": true},
      "items": [{"url": "#", "label": "Learning journey", "isjourney": true, "external": true},
                {"url": "#", "label": "Sign in", "issignin": true, "primary": true}] }
}}
{{#quicklinks}}
<nav class="tkf{{#abovetabbar}} tkf--tabbar{{/abovetabbar}} d-print-none" aria-label="{{label}}">
    {{#single}}{{#first}}
    <a class="tkf-link tkf-link--primary tkf-one" href="{{url}}"{{#external}} target="_blank" rel="noopener"{{/external}}>
        {{> theme_thinkera/quicklinks_icon }}<span class="tkf-text">{{label}}</span>
    </a>
    {{/first}}{{/single}}
    {{^single}}
    <details class="tkf-menu">
        <summary class="tkf-fab" aria-label="{{label}}">
            <svg class="tkf-open" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5 9 4Z"/><path d="M9 4v13M15 6.5v13"/></svg>
            <svg class="tkf-close" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18"/></svg>
        </summary>
        <div class="tkf-list">
            {{#items}}
            <a class="tkf-link{{#primary}} tkf-link--primary{{/primary}}" href="{{url}}"{{#external}} target="_blank" rel="noopener"{{/external}}>
                {{> theme_thinkera/quicklinks_icon }}<span>{{label}}</span>
            </a>
            {{/items}}
        </div>
    </details>
    <div class="tkf-wide">
        {{#items}}
        <a class="tkf-link{{#primary}} tkf-link--primary{{/primary}}" href="{{url}}"{{#external}} target="_blank" rel="noopener"{{/external}}>
            {{> theme_thinkera/quicklinks_icon }}<span>{{label}}</span>
        </a>
        {{/items}}
    </div>
    {{/single}}
</nav>
{{/quicklinks}}
{{#quicklinks}}{{^single}}
{{#js}}
(function() {
    // the list closes like any menu: a tap outside it, or Escape (and focus goes back to the button)
    var menu = document.querySelector('.tkf-menu');
    if (!menu) {
        return;
    }
    document.addEventListener('click', function(e) {
        if (menu.open && !menu.contains(e.target)) {
            menu.open = false;
        }
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && menu.open) {
            menu.open = false;
            menu.querySelector('summary').focus();
        }
    });
})();
{{/js}}
{{/single}}{{/quicklinks}}