{include file="{$tailadminURI}smarty/static/assets/css.tpl"}
<div class="tailwind-admin"
     id="tab-htmx-dashboard">
    <div class="tw-bg-gray-100 tw-dark:bg-gray-900">
        <div class="tw-mx-auto tw-max-w-(--breakpoint-2xl) tw-p-4 tw-md:p-6">
            <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-md:gap-6">
                <div class="tw-col-span-12">
                    <div class="tw-grid tw-grid-cols-1 tw-gap-4 tw-sm:grid-cols-2 tw-md:gap-6 tw-xl:grid-cols-2">
                        <!-- START Card-Performance -->
                        <div class="tw-rounded-2xl tw-border tw-border-gray-200 tw-dark:border-gray-800
                        tw-bg-white tw-p-5 tw-dark:bg-white/[0.03] tw-md:p-6">
                            <div class="tw-flex tw-items-end tw-justify-between">
                                <div>
                                    <span class="tw-text-sm tw-text-gray-500 tw-dark:text-gray-400">
                                        {__('Boost the performance of your shop')}
                                    </span>
                                    <h4 class="tw-mt-2 tw-text-title-sm tw-font-bold tw-text-gray-800
                                    tw-dark:text-white/90">
                                        {__('Performance Booster')}
                                    </h4>
                                </div>
                                <div>
                                    {include file="{$tailadminURI}smarty/static/formElements/switch.tpl"
                                    id='performanceBooster'
                                    isActive=$performanceBooster
                                    isDisabled=$performanceBoosterDisabled}
                                </div>
                            </div>
                            <div class="tw-mb-6 tw-mt-3 tw-flex tw-flex-wrap tw-items-center tw-gap-6
                            tw-sm:gap-5">
                                <div class="tw-overflow-hidden tw-rounded-lg">
                                    <img src="{$pluginURL}img/sqlite-caching.jpeg"
                                         alt="card"
                                         class="tw-overflow-hidden tw-rounded-lg">
                                </div>
                                {__('performanceBoosterDescription_html')}
                                <p class="tw-text-md tw-text-gray-500 tw-dark:text-gray-400">
                                    1. Many Small Queries Are Efficient In SQLite.
                                    <br>
                                    - <a href="https://www.sqlite.org/np1queryprob.html"
                                       title="Many Small Queries Are Efficient In SQLite"
                                       class="tw-text-sm tw-font-normal tw-text-brand-500 tw-dark:text-brand-400">
                                        https://www.sqlite.org/np1queryprob.html
                                    </a>
                                </p>
                                <p class="tw-text-sm tw-text-gray-500 tw-dark:text-gray-400 tw-italic">
                                    * {__('As long as you use a cache other than SQLite in your store, you cannot'|cat:
                                    ' enable the Performance Booster.')}
                                </p>
                            </div>
                        </div>
                        <!-- END Card Performance -->

                        <!-- START Card-Errors -->
                        <div class="tw-rounded-2xl tw-border tw-border-gray-200 tw-dark:border-gray-800
                        tw-bg-white tw-p-5 tw-dark:bg-white/[0.03] tw-md:p-6">
                            <div class="tw-flex tw-items-end tw-justify-between">
                                <div>
                                    <span class="tw-text-sm tw-text-gray-500 tw-dark:text-gray-400">
                                        {__('Stay one step ahead')}
                                    </span>
                                    <h4 class="tw-mt-2 tw-text-title-sm tw-font-bold tw-text-gray-800
                                    tw-dark:text-white/90">
                                        {__('Quality Booster')}
                                    </h4>
                                </div>
                                <div>
                                    {include file="{$tailadminURI}smarty/static/formElements/switch.tpl"
                                    id='qualityBooster'
                                    isActive=$qualityBooster}
                                </div>
                            </div>
                            <div class="tw-mb-6 tw-mt-3 tw-flex tw-flex-wrap tw-items-center tw-gap-6 tw-sm:gap-5">
                                <div class="tw-overflow-hidden tw-rounded-lg">
                                    <img src="{$pluginURL}img/quality-booster.png"
                                         alt="card"
                                         class="tw-overflow-hidden tw-rounded-lg">
                                </div>
                                {__('qualityBoosterDescription_html')}
                                <div hx-get="{stbIO uri='getQualityBoosterContent'}"
                                     hx-trigger="{if $qualityBooster}load from:body delay:1.5s, {/if}
                                     hxSwitchToggled from:#qualityBooster, hxDsnSaved from:body"
                                     hx-include="#qualityBooster"
                                     hx-swap="innerHTML"
                                     hx-disinherit="*"
                                     hx-indicator="body.htmx-indicator"></div>
                            </div>
                        </div>
                        <!-- END Card-Errors -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="{$tailadminURI}smarty/static/assets/js.tpl"}
