<div class="tw-rounded-2xl tw-border tw-border-gray-200 tw-dark:border-gray-800 tw-bg-gray-100
tw-dark:bg-white/[0.03] tw-relative{if $cacheDeactivated} tw-overflow-hidden{/if}">
    {if $cacheDeactivated}
        <div class="tw-absolute tw-w-full tw-h-full tw-z-1 tw-backdrop-blur-sm tw-text-center
        tw-content-center tw-dark:bg-white/[0.03]">
            <h5 class="tw-bg-gray-100 tw-dark:bg-gray-900 p-2">
                {__('Performance Booster is deactivated')}
            </h5>
        </div>
    {/if}
    <div class="tw-shadow-default tw-rounded-2xl tw-bg-white tw-px-5 tw-pb-11 tw-pt-5
    tw-dark:bg-gray-900 tw-sm:px-6 tw-sm:pt-6">
        <div class="tw-flex tw-justify-between">
            <div>
                <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                    {__('Performance Booster')}
                </h3>
                <p class="tw-mt-1 tw-text-theme-sm tw-text-gray-500 tw-dark:text-gray-400">
                    {__('Uses a modified SQLite cache to speed up your website')}
                </p>
            </div>
        </div>
        <div class="tw-relative tw-max-h-[195px]">
            <div id="cacheHealthChart" class="tw-h-full reloadableChart"></div>
            <span class="tw-absolute tw-left-1/2 tw-top-[85%] tw--translate-x-1/2 tw--translate-y-[85%]
            tw-rounded-full tw-bg-success-50 tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-success-600
            tw-dark:bg-success-500/15 tw-dark:text-success-500"
                  data-toggle="tooltip"
                  title="{__('Maximum bytes allocated for memory-mapped I/O')}">{$memoryTotal|default:0.0} GB</span>
        </div>
        <p class="tw-mx-auto tw-mt-1.5 tw-w-full tw-max-w-[380px] tw-text-center tw-text-sm tw-text-gray-500
        tw-sm:text-base">
            {__('The performance gain is reduced as soon as the cache size exceeds the memory-mapped I/O limit!')}
        </p>
    </div>
    <div class="tw-flex tw-items-center tw-justify-center tw-gap-5 tw-px-6 tw-py-3.5 tw-sm:gap-8 tw-sm:py-5">
        <div data-toggle="tooltip"
             title="{__('Available bytes allocated for memory-mapped I/O')}">
            <p class="tw-mb-1 tw-text-center tw-text-theme-xs tw-text-gray-500 tw-dark:text-gray-400
            tw-sm:text-sm">
                {__('Available')}
            </p>
            <p class="tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base tw-font-semibold
            tw-text-gray-800 tw-dark:text-white/90 tw-sm:text-lg tw-whitespace-nowrap">
                {$memoryFree|default:0.0} GB
            </p>
        </div>
        <div class="tw-h-7 tw-w-px tw-bg-gray-200 tw-dark:bg-gray-800"></div>
        <div data-toggle="tooltip"
             title="{__('Size of your cache database file')}">
            <p class="tw-mb-1 tw-text-center tw-text-theme-xs tw-text-gray-500 tw-dark:text-gray-400
            tw-sm:text-sm">
                {__('Used')}
            </p>
            <p class="tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base tw-font-semibold
            tw-text-gray-800 tw-dark:text-white/90 tw-sm:text-lg tw-whitespace-nowrap">
                {$cacheSize = $cacheSize|default:0.0}
                {$cacheSizeUnit = 'MB'}
                {if $cacheSize > 100}
                    {$cacheSize = $cacheSize / 1000}
                    {$cacheSizeUnit = 'GB'}
                {/if}
                {$cacheSize|string_format:"%.2f"} {$cacheSizeUnit}
            </p>
        </div>
        <div class="tw-h-7 tw-w-px tw-bg-gray-200 tw-dark:bg-gray-800"></div>
        <div data-toggle="tooltip"
             title="{__('Should be under %s milliseconds', $minGoodCacheSpeed)}">
            <p class="tw-mb-1 tw-text-center tw-text-theme-xs tw-text-gray-500 tw-dark:text-gray-400
            tw-sm:text-sm">
                {__('Performance')}
            </p>
            <p class="tw-flex tw-items-center tw-justify-center tw-gap-1 tw-text-base tw-font-semibold
            tw-text-gray-800 tw-dark:text-white/90 tw-sm:text-lg tw-whitespace-nowrap">
                {$cachePerformance|default:0.0} ms
                <svg width="16"
                     height="16"
                     viewBox="0 0 24 24"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path {if $cachePerformance|default:0.0 < $minGoodCacheSpeed}
                        d="M12.9996 3L5.06859 12.6934C4.72703 13.1109 4.55625 13.3196 4.55471 13.4956C4.55336 13.6486 4.62218 13.7939 4.74148 13.8897C4.87867 14 5.14837 14 5.68776 14H11.9996L10.9996 21L18.9305 11.3066C19.2721 10.8891 19.4429 10.6804 19.4444 10.5044C19.4458 10.3514 19.377 10.2061 19.2577 10.1103C19.1205 10 18.8508 10 18.3114 10H11.9996L12.9996 3Z"
                    {else}
                        d="M12 5V15M12 19H12.01"
                    {/if}
                        stroke="{if $cachePerformance|default:0.0 < $minGoodCacheSpeed}#039855{else}#D92D20{/if}"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"/>
                </svg>
            </p>
        </div>
    </div>
</div>
<script>
    ui.radialBarChartGenerator(
        document.querySelector('#cacheHealthChart'),
        [''],
        [{$cacheMemoryUsage|default:0.0}],
        ["#465FFF"],
        "#E4E7EC",
        "#1D2939",
        2,
        '%'
    );
</script>
