{% import 'admin-bar/_plugin-widgets-macros' as pluginWidgets %}

{% set widgetElement = widgetConfig['cachedDate'] ?? false ? 'admin-bar-button' : 'admin-bar-text' %}

{% set widgetContent %}
  {{ iconSvg('bolt')|attr({ class: 'icon', style: {
    '--admin-bar-icon-width': '1rem',
    color: widgetConfig['cached'] ? '#fec136' : 'color-mix(in srgb, #333f4c, transparent 50%)',
    stroke: widgetConfig['cached'] ? null : 'var(--admin-bar-button-color-text)',
    'stroke-width': widgetConfig['cached'] ? null : '15px',
    'stroke-linejoin': widgetConfig['cached'] ? null : 'round',
  } }) }}

  {{ pluginWidgets.widgetBadgeAndLabel(widgetConfig['cached'] ? 'widget-blitz-cached'|t('admin-bar', language = userLanguage) : 'widget-blitz-uncached'|t('admin-bar', language = userLanguage), widgets[pluginHandle].name, displayWidgetLabels) }}

  {% if widgetConfig['cachedDate'] ?? false %}
    <div slot="popover">
      {% set popoverInfo = [['widget-blitz-cached-date'|t('admin-bar', language = userLanguage), widgetConfig['cachedDate']|datetime()]] %}
      <admin-bar-text dl-content="{{ popoverInfo|json_encode }}"></admin-bar-text>
      <admin-bar-button onclick="window.adminBarPostRequest(this.closest('admin-bar'), 'blitz-refresh-cache', {{ widgetConfig['siteUri']|json_encode|json_encode }})" style="--admin-bar-icon-width: 1rem">
        {{ iconSvg('arrows-rotate')|attr({ class: 'icon' }) }}
        {{ 'widget-blitz-refresh-page'|t('admin-bar', language = userLanguage) }}
      </admin-bar-button>
    </div>
  {% endif %}
{% endset %}
{{ tag(widgetElement, {
  class: 'admin-bar-widget admin-bar-widget--blitz',
  html: widgetContent,
  style: { '--admin-bar-icon-width': '1.5rem' }
}) }}