{:* Neutral TS - License in the terms described in the LICENSE file. *:}

{:*
    Theme snippets
    --------------
*:}

{:*
    Page heading
    ------------
*:}
{:snippet; current-theme-page-title >>
    <div class="container mt-4">
        <h1 class="border-bottom p-2"><i class="{:snippet; {:;local::currentRoute->icon:}  :}" aria-hidden="true"></i> {:trans; {:;local::currentRoute->title:} :}</h1>
        <p class="lead text-muted"><img class="mb-1" src="/neutral/img/neutral-a-36.jpg" width="36" height="36"> {:trans; {:;local::currentRoute->description:} :}</p>
    </div>
:}

{:*
    Drawer footer
    -------------
*:}
{:snippet; current-theme-drawer-body-footer >>
    <div class="text-center w-100 mx-auto mb-3">
        <hr class="mx-3">
        <button class="add-as-pwa btn btn-light d-inline add-as-pwa mdi mdi-monitor-cellphone-star"> {:trans; Install APP :}</button>
    </div>
:}

{:*
    Drawer menu
    -----------
*:}
{:snippet; current-theme-drawer-themes-menu >>
    <div class="tab-pane fade" id="current-theme-drawer-tabs-theme" role="tabpanel" aria-labelledby="current-theme-drawer-theme">
        <div class="list-group">
            <a title="{:trans; Theme :}" class="list-group-item list-group-item-action item-toggle" data-bs-toggle="collapse" data-bs-target="#menu-drawer-theme-collapse">
                <i class="{:snippet; icon-add :}" aria-hidden="true"></i> {:trans; Theme :} ({:snippet; theme :})
            </a>
            <div class="collapse menu-collapse" id="menu-drawer-theme-collapse">
                {:each; site->validThemes key theme >> {:;:}
                    <a href="?theme={:;theme:}" class="list-group-item list-group-item-action">
                        <i class="{:snippet; icon-right :}" aria-hidden="true"></i> <span>{:;theme:}</span>
                    </a>
                :}
            </div>
            <a title="{:trans; Colors :}" class="list-group-item list-group-item-action item-toggle" data-bs-toggle="collapse" data-bs-target="#menu-drawer-navbar-collapse">
                <i class="{:snippet; icon-add :}" aria-hidden="true"></i> {:trans; Navbar :} ({:snippet; navbar :})
            </a>
            <div class="collapse menu-collapse" id="menu-drawer-navbar-collapse">
                {:each; site->navbarColors name color >> {:;:}
                    <a href="?navbar={:;name:}" class="list-group-item list-group-item-action">
                        <i class="{:snippet; icon-right :}" aria-hidden="true"></i> <span>{:;name:}</span>
                    </a>
                :}
            </div>
        </div>
    </div>
:}

{:*
    Theme icons
    -----------
*:}

{:*
    Theme icons materialicons
*:}
{:snippet; current-theme-icons-materialicons >>
    {:snippet; current-theme-icons >>
        materialicons
    :}
:}

{:*
    Theme icons fontawesome
*:}
{:snippet; current-theme-icons-fontawesome >>
    {:snippet; current-theme-icons >>
        fontawesome
    :}
:}

{:*
    Default theme icons
*:}
{:snippet; current-theme-icons >>
    materialicons
:}


{:*
    Carousel
    --------
*:}
{:snippet; current-theme-body-carousel >>
    {:snippet; carousel-active-0 >>
        active
    :}
    {:filled; local::currentTheme->carousel >>
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                {:each; local::currentTheme->carousel key image >> {:;:}
                    <div class="carousel-item {:snippet; carousel-active-{:;key:} :}" data-bs-interval="8000">
                        <img src="{:;image:}" class="d-block w-100">
                    </div>
                :}
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{:trans; Previous :}</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{:trans; Next :}</span>
            </button>
        </div>
    :}
:}

{:*
    Login form
    ----------
*:}
{:snippet; current-theme-login-form >>
    {:data; {:flg; require :} >> #/../data/form-login.json :}
    {:include; {:flg; require :} >> #/../plugins/build-form/snippets.ntpl :}

    {:code;
        {:param; form-name >> local::form-login :} {:* The key of the JSON containing the form *:}
        {:param; post-data >> CONTEXT->POST :} {:* The variable in which your app has stored the post data *:}

        {:snippet; neutral-build-form-parse :} {:* Render form *:}
    :}
:}

{:*
    Log in/out form modal
    ---------------------
*:}
{:snippet; current-theme-login-form-modal >>
    {:filled; CONTEXT->SESSION >>
        <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="loginModalLabel">{:trans; Logout :}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body mx-md-5 mb-3 mx-auto text-center">
                        <button type="button" class="btn btn-primary mt-4 px-5" onclick="top.location.href='/logout'" data-bs-dismiss="modal">{:trans; Close session :}</button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{:trans; Close :}</button>
                    </div>
                </div>
            </div>
        </div>
    :}{:else;
        <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="loginModalLabel">{:trans; Login :}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body mx-md-5 mb-3">
                        {:snippet; current-theme-login-form :}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{:trans; Close :}</button>
                    </div>
                </div>
            </div>
        </div>
    :}
:}


{:*
    heading size small
    ------------------
*:}
{:snippet; current-theme-heading-small >>
    {:snippet; current-theme-heading >>
        <style>
            h1, .h1 {
                font-size: 1.6rem;
            }
            h2, .h2 {
                font-size: 1.5rem;
            }
            h3, .h3 {
                font-size: 1.4rem;
            }
            h4, .h4 {
                font-size: 1.3rem;
            }
            h5, .h5 {
                font-size: 1.2rem;
            }
            h6, .h6 {
                font-size: 1.1rem;
            }
        </style>
    :}
:}

{:*
    heading size medium
    ------------------
*:}
{:snippet; current-theme-heading-medium >>
    {:snippet; current-theme-heading >>
        <style>
            h1, .h1 {
                font-size: 2.1rem;
            }
            h2, .h2 {
                font-size: 1.9rem;
            }
            h3, .h3 {
                font-size: 1.7rem;
            }
            h4, .h4 {
                font-size: 1.5rem;
            }
            h5, .h5 {
                font-size: 1.3rem;
            }
            h6, .h6 {
                font-size: 1.1rem;
            }
        </style>
    :}
:}

{:*
    navbar right menu
    -----------------
*:}
{:snippet; current-theme-body-navbar-right-content >>
    <ul class="navbar-nav ms-auto">
        {:filled; CONTEXT->SESSION >>
            <li class="nav-item">
                <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#loginModal">
                    <i class="{:snippet; icon-sign-off  :}" aria-hidden="true"></i> <span class="d-none d-md-inline">{:trans; Sign off :}</span>
                </a>
            </li>
        :}{:else;
            <li class="nav-item">
                <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#loginModal">
                    <i class="{:snippet; icon-sign-in  :}" aria-hidden="true"></i> <span class="d-none d-md-inline">{:trans; Sign in :}</span>
                </a>
            </li>
        :}
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="language"><i class="{:snippet; icon-locale  :}" aria-hidden="true"></i> <span class="d-none d-md-inline">{:trans; Language :}</span></a>
            <div class="dropdown-menu dropdown-menu-end">
            {:each; site->languages key lang >> {:^;:}
                <a class="dropdown-item" href="?lang={:;lang:}">{:trans; ref-locale-{:;lang:} :} {:snippet; check-{:;lang:} :}</a>
            :}
            </div>
        </li>
    </ul>
:}


{:*
    Theme default nav
    -----------------
*:}
{:snippet; current-theme-body-navbar >>
    <nav id="main-navbar" class="main-navbar main-navbar-visible d-block {:snippet; current-theme-body-navbar-class :}{:else; navbar navbar-expand fixed-top :} {:snippet; current-theme-body-navbar-color :}{:else; navbar-light bg-light :} {:snippet; current-theme-body-navbar-size :}{:else; py-2 py-md-3 :}">
        <div class="container">
            <button class="navbar-nav btn border-0 shadow-none p-0 px-1 me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#current-theme-drawer" aria-controls="current-theme-drawer">
                <span title="{:trans; {:;site->menu->name:} :}{:else; {:trans; Menu :} :}" class="navbar-toggler-icon disabled"></span>
            </button>
            <a class="navbar-brand mx-1 me-md-3" href="{:;site->menu->link:}" style="height: 37px; display: flex; align-items: center;">
                <span class="page-is-loading small" style="margin-top: 2px; margin-left: 2px; margin-right: 10px;">{:snippet; spin-1x :}</span>
                <span class="page-has-loaded nav-brand-text me-md-2" style="display: none;">{:trans; {:;site->name:} :}{:else; Neutral :}</span>
            </a>
            <ul class="current-theme-body-navbar-right navbar-nav ms-auto">
                {:snippet; current-theme-body-navbar-right-content :}
            </ul>
        </div>
        <div class="container current-theme-body-navbar-bottom navbar-nav">
            {:snippet; current-theme-body-navbar-bottom-content :}
        </div>
        <div class="container current-theme-body-navbar-notices navbar-nav">
            {:snippet; current-theme-body-navbar-notices-content :}
        </div>
    </nav>
    <div id="main-navbar-hidden" style="position: relative; visibility: hidden;">
        {:*
            Simulate height navigation bar spacing
        *:}
        <script>
            function currentMainNavbarHeight() {
                var eleMainNavbar   = document.getElementById('main-navbar');
                var eleNavbarHidden = document.getElementById('main-navbar-hidden');
                if (window.getComputedStyle(eleMainNavbar).getPropertyValue('position').match(/fixed|sticky/i)) {
                    var mainNavBarHeight = eleMainNavbar.offsetHeight;
                    eleNavbarHidden.setAttribute('style', 'height:' + mainNavBarHeight + 'px' );
                } else {
                    eleNavbarHidden.setAttribute('style', 'height:0px');
                    eleNavbarHidden.style.display = 'none';
                }
            }
            currentMainNavbarHeight();
            window.addEventListener('load', (event) => {
                currentMainNavbarHeight();
            });
            window.addEventListener('resize', (event) => {
                setTimeout(function(){
                    currentMainNavbarHeight();
                }, 50);
            });
        </script>
    </div>
    {:snippet; current-theme-drawer :}
:}

{:*
    Theme drawer
    ------------
*:}
{:snippet; current-theme-drawer >>
    <div class="offcanvas offcanvas-start shadow theme-drawer" tabindex="-1" id="current-theme-drawer" aria-labelledby="current-theme-drawer-label" style="width: 350px; max-width: 100%;">
        <div class="offcanvas-header px-1 {:snippet; current-theme-body-navbar-color :}{:else; navbar-light bg-light :}  {:snippet; current-theme-body-navbar-size :}{:else; py-2 py-md-3 :}" data-bs-dismiss="offcanvas">
            <div class="navbar-brand d-flex align-items-center ms-2">
                <span class="mx-2">{:trans; {:;local::currentDrawer->name:} :}</span>
            </div>
            <i class="{:snippet; icon-back :} theme-drawer-close text-muted btn btn-link me-2 ms-auto" data-bs-dismiss="offcanvas" aria-hidden="true"></i>
        </div>
        <div class="offcanvas-body p-0">
            {:snippet; current-theme-drawer-body-content :}
        </div>
        <div class="offcanvas-footer">
            {:snippet; current-theme-drawer-body-footer :}
        </div>
    </div>
:}

{:*
    Theme drawer content
    --------------------
*:}
{:snippet; current-theme-drawer-body-content >>
    <div class="d-flex align-items-start mt-2" id="current-theme-drawer-body-content">
        <div class="nav flex-column nav-pills me-2 border-end" id="current-theme-drawer-tabs" role="tablist" aria-orientation="vertical">
            {:each; local::currentDrawer->menu->main tabs menu >> {:;:}
                <button title="{:trans; {:;menu->name:} :}" class="drawer-btn nav-link py-1 px-2 m-3" id="current-theme-drawer-tabs-main-btn" data-bs-toggle="pill" data-bs-target="#current-theme-drawer-tabs-{:;tabs:}" type="button" role="tab" aria-controls="current-theme-drawer-tabs-{:;tabs:}" aria-selected="true">
                    <i class="{:snippet; {:;menu->icon:} :} x-icon-24px" aria-hidden="true"></i>
                </button>
            :}
        </div>
        <div class="tab-content text-truncate me-2 mt-3 w-100" id="current-theme-drawer-tabs-content">
            {:each; local::currentDrawer->menu->tabs tabs menu >> {:;:}
                <div class="tab-pane fade" id="current-theme-drawer-tabs-{:;tabs:}" role="tabpanel" aria-labelledby="current-theme-drawer-{:;tabs:}">
                    <div class="list-group">
                        {:each; menu key opt >> {:;:}
                            <a href="{:;opt->link:}" class="list-group-item list-group-item-action">
                                <i class="{:snippet; {:;opt->icon:} :}" aria-hidden="true"></i> <span>{:trans; {:;opt->text:} :}</span>
                            </a>
                        :}
                    </div>
                </div>
            :}
            {:snippet; current-theme-drawer-themes-menu :}
        </div>
    </div>
    <script>
        window.addEventListener('load', (event) => {
            var drawerOffcanvas = new bootstrap.Offcanvas(document.getElementById('current-theme-drawer'));
            $('#current-theme-drawer-tabs-main-btn').click();
            drawerOffcanvas.hide();
            $('#current-theme-drawer-tabs-content a').on('click', function(e) {
                if ($(this).attr("href")) {
                    drawerOffcanvas.hide();
                }
            });
        });
    </script>
:}


{:*
    Theme default content wrapper
    -----------------------------
*:}
{:snippet; current-theme-body-content >>
    <div id="current-theme-body-content" class="current-theme-body-content" style="min-height:  calc(100vh - 120px);">

        {:*
            Header
        *:}
        {:snippet; current-theme-body-content-page-header :}
        <div class="{:snippet; current-theme-body-content-container-class :}">

            {:*
                Grid para sidebar, wrapper para sidebar y page-content.
                else: se muestra sólo page-content sin grid.
            *:}
            {:snippet; current-theme-body-content-grid-sidebar :}
            {:else;
                {:snippet; current-theme-body-content-content :}
            :}
        </div>
    </div>
:}

{:*
    Theme default footer
    --------------------
*:}
{:snippet; current-theme-body-footer >>
    <footer class="">
        <div class="container -fixed-bottom">
            {:snippet; current-theme-body-footer-content :}
        </div>
    </footer>
:}

{:snippet; current-theme-body-footer-content >>
    <div class="text-center w-100 mx-auto my-5">
        <hr class="mx-2">
        <div>
            <p>
                Neutral TS:
                <a href="https://docs.rs/neutralts/latest/neutralts/">Docs</a> -
                <a href="https://crates.io/crates/neutralts">Crate</a> -
                <a href="https://gitlab.com/neutralfw/neutralts">Repository</a>.
                Themes from <a href="https://bootswatch.com/">Bootswatch</a> and <a href="https://getbootstrap.com/" rel="nofollow">Bootstrap</a>.
            </p>
        </div>
    </div>
:}

{:*
    Icon page loading
    -----------------
*:}
{:snippet; current-theme-page-loading >>
    <script>
        $(window).bind('load', function () {
            setTimeout(function(){
                $('.page-is-loading').hide();
                $('.page-has-loaded').show();
            }, {:;CONTEXT->GET->simulate_spin:}{:else; 250 :});
        });
        $('a').on('click', function(e) {
            var thisSite = window.location.origin;
            if ($(this).attr("href")) {
                if ($(this).attr("href").substring(0, 1) == "/" || $(this).attr("href").substring(0, 1) == "?" || $(this).attr("href").substring(0, thisSite.length) == thisSite) {
                    if ($(this).attr("target") != "_blank") {
                        $('.page-has-loaded').hide();
                        $('.page-is-loading').show();
                        $(window).bind('unload', function () {
                            $('.page-is-loading').hide();
                        });
                        setTimeout(function(){
                            $('.page-is-loading').hide();
                            $('.page-has-loaded').show();
                        }, 12000);
                    }
                }
            }
        });
    </script>
:}

{:*
    current-theme-spin
    ------------------
*:}
{:snippet; current-theme-spin-set-spin1 >>
    {:snippet; current-theme-spin >>
        {:snippet; spin-1x >>
            <div class="spin spinner-grow spinner-grow-sm mx-1" role="status"></div>
        :}
        {:snippet; spin-lg >>
            <div class="spin spinner-grow spinner-grow mx-1" style="width: 1.2rem; height: 1.2rem;" role="status"></div>
        :}
        {:snippet; spin-2x >>
            <div class="spin spinner-grow spinner-grow mx-1" style="width: 1.5rem; height: 1.5rem;" role="status"></div>
        :}
        {:snippet; spin-3x >>
            <div class="spin spinner-grow spinner-grow mx-1" style="width: 1.8rem; height: 1.8rem;" role="status"></div>
        :}
        {:snippet; spin-4x >>
            <div class="spin spinner-grow spinner-grow mx-1" style="width: 2.2rem; height: 2.2rem;" role="status"></div>
        :}
        {:snippet; spin-5x >>
            <div class="spin spinner-grow spinner-grow mx-1" style="width: 2.7rem; height: 2.7rem;" role="status"></div>
        :}
    :}
:}

{:snippet; current-theme-spin-set-spin2 >>
    {:snippet; current-theme-spin >>
        {:snippet; spin-1x >>
            <div class="spin spinner-border spinner-border-sm mx-1" role="status"></div>
        :}
        {:snippet; spin-lg >>
            <div class="spin spinner-border spinner-border mx-1" style="width: 1.2rem; height: 1.2rem;" role="status"></div>
        :}
        {:snippet; spin-2x >>
            <div class="spin spinner-border spinner-border mx-1" style="width: 1.5rem; height: 1.5rem;" role="status"></div>
        :}
        {:snippet; spin-3x >>
            <div class="spin spinner-border spinner-border mx-1" style="width: 1.8rem; height: 1.8rem;" role="status"></div>
        :}
        {:snippet; spin-4x >>
            <div class="spin spinner-border spinner-border mx-1" style="width: 2.2rem; height: 2.2rem;" role="status"></div>
        :}
        {:snippet; spin-5x >>
            <div class="spin spinner-border spinner-border mx-1" style="width: 2.7rem; height: 2.7rem;" role="status"></div>
        :}
    :}
:}

{:snippet; current-theme-spin-set-spin3 >>
    {:snippet; current-theme-spin >>
        {:snippet; spin-1x >>
            <div class="spin spinner-border spinner-border-sm mx-1 border-bottom-0" role="status"></div>
        :}
        {:snippet; spin-lg >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0" style="width: 1.2rem; height: 1.2rem;" role="status"></div>
        :}
        {:snippet; spin-2x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0" style="width: 1.5rem; height: 1.5rem;" role="status"></div>
        :}
        {:snippet; spin-3x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0" style="width: 1.8rem; height: 1.8rem;" role="status"></div>
        :}
        {:snippet; spin-4x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0" style="width: 2.2rem; height: 2.2rem;" role="status"></div>
        :}
        {:snippet; spin-5x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0" style="width: 2.7rem; height: 2.7rem;" role="status"></div>
        :}
    :}
:}

{:snippet; current-theme-spin-set-spin4 >>
    {:snippet; current-theme-spin >>
        {:snippet; spin-1x >>
            <div class="spin spinner-border spinner-border-sm mx-1 border-bottom-0 border-start-0" role="status"></div>
        :}
        {:snippet; spin-lg >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-start-0" style="width: 1.2rem; height: 1.2rem;" role="status"></div>
        :}
        {:snippet; spin-2x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-start-0" style="width: 1.5rem; height: 1.5rem;" role="status"></div>
        :}
        {:snippet; spin-3x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-start-0" style="width: 1.8rem; height: 1.8rem;" role="status"></div>
        :}
        {:snippet; spin-4x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-start-0" style="width: 2.2rem; height: 2.2rem;" role="status"></div>
        :}
        {:snippet; spin-5x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-start-0" style="width: 2.7rem; height: 2.7rem;" role="status"></div>
        :}
    :}
:}

{:snippet; current-theme-spin-set-spin5 >>
    {:snippet; current-theme-spin >>
        {:snippet; spin-1x >>
            <div class="spin spinner-border spinner-border-sm mx-1 border-bottom-0 border-top-0" role="status"></div>
        :}
        {:snippet; spin-lg >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-top-0" style="width: 1.2rem; height: 1.2rem;" role="status"></div>
        :}
        {:snippet; spin-2x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-top-0" style="width: 1.5rem; height: 1.5rem;" role="status"></div>
        :}
        {:snippet; spin-3x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-top-0" style="width: 1.8rem; height: 1.8rem;" role="status"></div>
        :}
        {:snippet; spin-4x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-top-0" style="width: 2.2rem; height: 2.2rem;" role="status"></div>
        :}
        {:snippet; spin-5x >>
            <div class="spin spinner-border spinner-border mx-1 border-bottom-0 border-top-0" style="width: 2.7rem; height: 2.7rem;" role="status"></div>
        :}
    :}
:}

{:snippet; current-theme-spin-set-spin6 >>
    {:snippet; current-theme-spin >>
        {:snippet; spin-1x >>
            <div class="spin spinner-border spinner-border-sm mx-1 border-start-0 border-end-0" role="status"></div>
        :}
        {:snippet; spin-lg >>
            <div class="spin spinner-border spinner-border mx-1 border-start-0 border-end-0" style="width: 1.2rem; height: 1.2rem;" role="status"></div>
        :}
        {:snippet; spin-2x >>
            <div class="spin spinner-border spinner-border mx-1 border-start-0 border-end-0" style="width: 1.5rem; height: 1.5rem;" role="status"></div>
        :}
        {:snippet; spin-3x >>
            <div class="spin spinner-border spinner-border mx-1 border-start-0 border-end-0" style="width: 1.8rem; height: 1.8rem;" role="status"></div>
        :}
        {:snippet; spin-4x >>
            <div class="spin spinner-border spinner-border mx-1 border-start-0 border-end-0" style="width: 2.2rem; height: 2.2rem;" role="status"></div>
        :}
        {:snippet; spin-5x >>
            <div class="spin spinner-border spinner-border mx-1 border-start-0 border-end-0" style="width: 2.7rem; height: 2.7rem;" role="status"></div>
        :}
    :}
:}

{:*
    Set default spinner.
*:}
{:snippet; current-theme-spin-set-spin1 :}

{:*
    Reload page JS spiner
*:}
{:snippet; reload-self-js-spiner >>
    <div class="text-center text-muted p-5 m-5">{:snippet; spin-3x :}</div>
    <script>
        setTimeout( function() {
            window.history.pushState("", document.title, window.location.pathname);
            self.location.href=self.location.href.split('#')[0].split('?')[0];
        }, 100);
    </script>
:}

{:*
    Theme workaround
    ----------------
*:}

{:snippet; current-theme-workaround-css:lux >>
    <style>
        @media (max-width: 767px) {
            .input-group-text {
                padding: .75rem .85rem;
            }
        }
    </style>
:}

{:snippet; current-theme-workaround-css:materia >>
    <style>
        .input-group-text {
            padding: .75rem .85rem;
        }
    </style>
:}

{:snippet; current-theme-workaround-css:litera >>
    <style>
        @media (max-width: 767px) {
            .input-group-text {
                padding: .5rem .9rem;
            }
        }
    </style>
:}

{:snippet; current-theme-workaround-css:journal >>
    <style>
        .nav-brand-text {
            margin-bottom: 6px;
        }
    </style>
:}

{:snippet; current-theme-workaround-css:sketchy >>
    <style>
        .nav-brand-text {
            margin-bottom: -4px;
        }
    </style>
:}

{:*
    jquery
*:}
{:snippet; script-jquery >>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
:}

{:*
    Default theme
*:}
{:snippet; theme >>
    sketchy
:}

{:*
    Theme css
*:}
{:snippet; current-theme-css >>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/{:snippet; theme :}/bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
:}

{:*
    Theme js
*:}
{:snippet; current-theme-js >>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
:}

{:*
    Custom css
*:}
{:snippet; neutral-style-bt5 >>
    <link rel="stylesheet" href="/neutral/css/neutral-custom.css" />
:}

{:*
    https://highlightjs.org/
*:}
{:snippet; highlight-js >>
    {:moveto; </head >>
        {:^;:} {:* <-- unnecessary, just for nice output *:}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css" integrity="sha512-hasIneQUHlh06VNBe7f6ZcHmeRTLIaQWFd43YriJ0UND19bvYRauxthDg8E4eVNPm9bRUhr5JGeqH7FRFXQu5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    {:;:} {:* <-- unnecessary, just for nice output *:}
    :}
    {:moveto; </body >>
        {:^;:} {:* <-- unnecessary, just for nice output *:}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js" integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>hljs.highlightAll();</script>
    {:;:} {:* <-- unnecessary, just for nice output *:}
    :}
:}

{:*
    service-worker for PWA
*:}
{:snippet; service-worker.js >>
    <script>
        window.addEventListener('load', function() {
            if ('serviceWorker' in navigator) {
                serviceWorkerReg = navigator.serviceWorker.register('/service-worker.js');
            } else {
                serviceWorkerReg = false;
            }
        });
        window.addEventListener('load', function() {
            if ('serviceWorker' in navigator) {
                var deferredPrompt;
                const addAsPwa = document.querySelector('.add-as-pwa');
                addAsPwa.style.display = 'none';
                window.addEventListener('beforeinstallprompt', (e) => {
                    e.preventDefault();
                    deferredPrompt = e;
                    addAsPwa.style.display = 'block';
                    addAsPwa.addEventListener('click', (e) => {
                        addAsPwa.style.display = 'none';
                        deferredPrompt.prompt();
                        deferredPrompt.userChoice.then((choiceResult) => {
                            if (choiceResult.outcome === 'accepted') {
                                console.log('User accepted the A2HS prompt');
                            } else {
                                console.log('User dismissed the A2HS prompt');
                            }
                            deferredPrompt = null;
                        });
                    });
                });
            }
        });
    </script>
:}
