<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-justify-between">
        <div class="tw-flex tw-h-12 tw-w-12 tw-items-center tw-justify-center tw-rounded-xl tw-bg-gray-100
        tw-dark:bg-gray-800">
            <svg class="tw-fill-gray-800 tw-dark:fill-white/90"
                 width="24"
                 height="24"
                 viewBox="{$icon->viewBox|default:'0 0 24 24'}"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                {include file="{$tailadminURI}svg-paths/{$icon->name}.tpl"}
            </svg>
        </div>
        {if empty($details) === false}
            <div class="tw-relative tw-h-fit">
                <button hx-get="{$details}"
                        hx-swap="afterend"
                        class="tw-inline-flex tw-items-center tw-justify-center tw-gap-1 tw-rounded-full
                        tw-bg-brand-50 tw-py-0.5 tw-pl-2 tw-pr-2.5 tw-text-sm tw-font-medium
                        tw-text-brand-500 tw-dark:bg-brand-500/15 tw-dark:text-brand-400">
                    <svg class="tw-fill-current"
                         width="20"
                         height="20"
                         viewBox="0 0 24 24"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75V12C11.25 12.4142 11.5858 12.75 12 12.75H21.25C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2ZM12.75 11.25V3.53263C13.2645 3.57761 13.7659 3.66843 14.25 3.80098V3.80099C15.6929 4.19606 16.9827 4.96184 18.0104 5.98959C19.0382 7.01734 19.8039 8.30707 20.199 9.75C20.3316 10.2341 20.4224 10.7355 20.4674 11.25H12.75ZM2 12C2 7.25083 5.31065 3.27489 9.75 2.25415V3.80099C6.14748 4.78734 3.5 8.0845 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C15.9155 20.5 19.2127 17.8525 20.199 14.25H21.7459C20.7251 18.6894 16.7492 22 12 22C6.47715 22 2 17.5229 2 12Z" fill=""></path>
                    </svg>
                    {__('Open chart')}
                </button>
            </div>
        {/if}
    </div>
    <div class="tw-mt-5 tw-flex tw-items-end tw-justify-between">
        <div>
            <span class="tw-text-sm tw-text-gray-500 tw-dark:text-gray-400">
                {$title}
            </span>
            <h4 class="tw-mt-2 tw-text-title-sm tw-font-bold tw-text-gray-800 tw-dark:text-white/90">
                {$total}
            </h4>
        </div>
        {if isset($hint)}
            <span class="tw-flex tw-items-center tw-gap-1 tw-rounded-full tw-py-0.5 tw-pl-2
                tw-pr-2.5 tw-text-sm tw-font-medium {if $hint->isCritical}tw-bg-error-50 tw-text-error-600
                tw-dark:bg-error-500/15 tw-dark:text-error-500{else}tw-bg-success-50 tw-text-success-600
                tw-dark:bg-success-500/15 tw-dark:text-success-500{/if}">
                {$hint->text}
            </span>
        {/if}
    </div>
</div>
