{{!
    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/local/dropdown/dialog

    Displays a dropdown dialog component.

    Classes required for JS:
    * none

    Context variables required for this template:
    * buttoncontent String - the dropdown trigger button content.
    * dialogcontent String - the dropdown dialog content.

    Optional blocks:
    * dropdownclasses - additional classes for the dropdown.
    * buttonclasses - additional classes for the dropdown trigger button.
    * dialogclasses - additional classes for the dropdown dialog.
    * dialogcontent - the dropdown dialog content.
    * buttoncontent - the dropdown trigger button content.
    * extras - custom HTML attributes for the component.
    * dropdownid - the dropdown id (will be auto-generate if no id is passed).

    Example context (json):
    {
        "dropdownid": "internaldropdownid",
        "buttonid": "internalbuttonid",
        "buttoncontent": "Trigger button",
        "dialogcontent": "<a href=\"#\">Moodle</a>",
        "extras": [
            {
                "attribute": "data-example",
                "value": "stickyfooter"
            }
        ],
        "buttonclasses": "extraclasses",
        "dialogclasses": "extraclasses",
        "disabledbutton": false,
        "classes": "extraclasses"
    }
}}
<div
    class="dropdown {{!
        }} {{$ dropdownclasses }} {{!
            }} {{#classes}} {{classes}} {{/classes}} {{!
        }} {{/ dropdownclasses }}"
    id="{{$ dropdownid }}{{!
            }}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
            }}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
        }}{{/ dropdownid }}"
    {{$ extras }}
        {{#extras}}
            {{attribute}}="{{value}}"
        {{/extras}}
    {{/ extras }}
>
    <button
        class="{{$ buttonclasses }} {{!
                }} {{^buttonclasses}} btn btn-light btn-outline-secondary dropdown-toggle {{/buttonclasses}} {{!
                }} {{#buttonclasses}} {{buttonclasses}} {{/buttonclasses}} {{!
            }} {{/ buttonclasses }}"
        type="button"
        id="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        data-for="dropdowndialog_button"
        {{#disabledbutton}} disabled {{/disabledbutton}}
    >
        {{$ buttoncontent }}
            {{{ buttoncontent }}}
        {{/ buttoncontent }}
    </button>
    <div
        class="dropdown-menu {{!
            }} {{#position}} {{position}} {{/position}} {{!
            }} {{$ dialogclasses }} {{!
                }} {{#dialogclasses}} {{dialogclasses}} {{/dialogclasses}} {{!
            }} {{/ dialogclasses }}"
        aria-labelledby="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}"
        data-for="dropdowndialog_dialog"
    >
        <div class="p-2" data-for="dropdowndialog_content">
            {{$ dialogcontent }}
                {{{dialogcontent}}}
            {{/ dialogcontent }}
        </div>
    </div>
</div>
{{#js}}
    require(['core/local/dropdown/dialog'], function(Module) {
        Module.init('#' + '{{$ dropdownid }}{{!
            }}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
            }}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
        }}{{/ dropdownid }}');
    });
{{/js}}