{include file="{$tailadminURI}smarty/static/assets/css.tpl"}
<style>
    #widget-StabilaWidgetErrors .widget-head {
        display: none;
    }
    #widget-StabilaWidgetErrors .widget-content {
        padding: 0;
    }
</style>

<div class="tw-overflow-hidden tw-rounded-2xl tw-border tw-border-gray-200 tw-bg-white tw-p-6
tw-dark:border-gray-800 tw-dark:bg-white/[0.03]">
    <div class="tw-mb-6 tw-flex tw-justify-between">
        <div>
            <div>
                <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90 tw-inline-block">
                    {if $lastErrors > 0}❗{else}👌{/if} {$lastErrors} {__('Errors')}
                </h3>
                <span class="tw-text-theme-xs tw-mt-1 tw-ml-2 tw-text-gray-500 tw-dark:text-gray-400">
                    <span class="{if $changeType === '-'}tw-text-success-600{else}tw-text-error-500{/if}
                    tw-mr-1 tw-inline-block"
                          data-toggle="tooltip"
                          data-placement="auto"
                          title="{__('Error rate compared to last weeks')}">
                        ({$changeAmount})
                    </span>
                </span>
            </div>
            <p class="tw-text-theme-sm tw-mt-1 tw-text-gray-500 tw-dark:text-gray-400">
                {__('Errors from the last 7 days')}
            </p>
        </div>
        <div class="tw-relative tw-h-fit">
            <a href="#" onclick="ui.removeWidget(event, this);">
                <svg class="tw-fill-current"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
                          fill=""></path>
                </svg>
            </a>
        </div>
    </div>

    <div class="tw-mb-3 tw-flex tw-justify-between">
        <div style="align-content: end;">
            <a href="{$pluginURL}"
               class="tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
                {__('Show details')}
            </a>
        </div>
    </div>
    <div class="tw-max-w-full">
        <div id="errorRateMiniChart"></div>
    </div>
</div>

<script>
    document.body.addEventListener("uiAttachedEvent", function () {
        ui.miniChartGenerator(
            document.querySelector('#errorRateMiniChart'),
            "{__('Errors')}",
            [{$weeklyErrors}],
            "{if $changeType === '+'}#ef4444{else}#10b981{/if}",
            '0',
            ''
        );
    }, { once: true });
</script>

{include file="{$tailadminURI}smarty/static/assets/js.tpl"}
