{{!
    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 block_xp/modal-popup-notification

    Modal popup notification.

    Example context (json):
    {
    }
}}
{{< core/modal }}
    {{$title}}
        {{! Note, the title won't display on Moodle 3.3 with Boost due to incorrect template. }}
        {{#str}} congratulationsyouleveledup, block_xp {{/str}}
    {{/title}}
    {{$body}}
        <div class="block_xp">
            <div class="xp-text-center xp-text-xl xp-font-bold">
                <h3 class="xp-text-center xp-mb-2 xp-text-3xl xp-animate-fade-in xp-animation-delay-[500ms]">
                    {{#str}}youleveledupexcl, block_xp{{/str}}
                </h3>
            </div>
            <div class="xp-my-4 xp-grid [&>div]:xp-row-start-1 [&>div]:xp-col-start-1 xp-justify-center xp-items-center">
                <div class="xp-animate-badge-leaving xp-pointer-events-none">
                    {{{prevlevelbadge}}}
                </div>
                <div class="xp-animate-badge-ping xp-animation-delay-[6s] xp-opacity-0">
                    {{{levelbadge}}}
                </div>
                <div class="xp-animate-badge-incoming xp-animation-delay-[3.8s]">{{{levelbadge}}}</div>
            </div>
            {{#levelname}}
                <div class="xp-text-center xp-font-bold xp-animate-fade-in xp-animation-delay-[4.5s]">
                    {{levelname}}
                </div>
            {{/levelname}}
            {{#message}}
            <div class="xp-mt-6 xp-text-lg xp-flex xp-justify-center xp-animate-fade-in xp-animation-delay-[5s] xp-bg-gray-100 xp-rounded xp-px-4 xp-py-2">
                {{{message}}}
            </div>
            {{/message}}
        </div>
    {{/body}}
    {{$footer}}
        <div class="block_xp">
            <button type="button" class="btn btn-default btn-secondary xp-transition-opacity xp-opacity-0 xp-invisible xp-duration-1000 xp-pointer-events-none" data-action="hide">{{#str}} coolthanks, block_xp {{/str}}</button>
        </div>
    {{/footer}}
{{/ core/modal }}

