{{!
    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/comboboxsearch

    Combobox search selector dropdown.

    Context variables required for this template:
    * label - The label for the the combobox.
    * name - The name of the input element representing the combobox.
    * value - The value of the input element representing the combobox.
    * renderlater - This determines if we show a placeholder whilst fetching content to replace within the placeholder region
    * buttonheader - The header to be shown above the button
    * buttoncontent - The string to be shown to users to trigger the dropdown
    * usebutton - If we want to use a button to trigger the dropdown, or just the dropdown itself
    * dropdowncontent - If rendering now, The content within the dropdown
    * parentclasses - Our class for the DOM Node that the default bootstrap dropdown events are tagged onto
    * buttonclasses - If you want special handling add classes here
    * dropdownclasses - If you want special handling or sizing etc add classes here
    * instance - The instance ID of the tertiary navigation dropdown

    Example context (json):
    {
        "label": "Example searchable combobox",
        "name": "input-1",
        "value": "0",
        "renderlater": false,
        "buttonheader": "Example:",
        "usebutton": true,
        "buttoncontent": "Dropdown button",
        "dropdowncontent": "Some body content to render right now",
        "parentclasses": "my-dropdown",
        "buttonclasses": "my-button",
        "dropdownclasses": "my-cool-dropdown",
        "instance": 25
    }
}}
{{#buttonheader}}
    <small>{{.}}</small>
{{/buttonheader}}
<div class="{{#parentclasses}}{{.}}{{/parentclasses}} dropdown" data-instance="{{instance}}">

    {{#usebutton}}
        <div tabindex="0"
             data-toggle="dropdown"
             aria-expanded="false"
             role="combobox"
             aria-haspopup="dialog"
             aria-controls="dialog-{{instance}}-{{uniqid}}"
             class="{{#buttonclasses}}{{.}}{{/buttonclasses}} btn dropdown-toggle d-flex text-left align-items-center p-0 font-weight-bold"
             aria-label="{{label}}"
             data-input-element="input-{{instance}}-{{uniqid}}">
            {{{buttoncontent}}}
        </div>
        <input type="hidden" name="{{name}}" value="{{value}}" id="input-{{instance}}-{{uniqid}}"/>
    {{/usebutton}}

    {{^usebutton}}{{{buttoncontent}}}{{/usebutton}}

    <div class="{{#dropdownclasses}}{{.}}{{/dropdownclasses}} dropdown-menu"
        id="dialog-{{instance}}-{{uniqid}}"
        {{#usebutton}}
            role="dialog"
            aria-modal="true"
            aria-label="{{label}}"
        {{/usebutton}}
    >
        <div class="w-100 p-3" data-region="placeholder">
            {{#renderlater}}
                <div class="d-flex flex-column align-items-stretch justify-content-between" style="height: 150px; width: 300px;">
                    <div class="bg-pulse-grey w-100 h-100 my-1"></div>
                    <div class="bg-pulse-grey w-100 h-100 my-1"></div>
                    <div class="bg-pulse-grey w-100 h-100 my-1"></div>
                </div>
            {{/renderlater}}
            {{^renderlater}}
                {{{dropdowncontent}}}
            {{/renderlater}}
        </div>
    </div>
</div>