{# Shown when the storefront API cannot be reached. `retry` = Alpine expression. #}
<div class="rvx-flex rvx-flex-col sm:rvx-flex-row rvx-items-center rvx-gap-space12 rvx-rounded-card rvx-border rvx-border-danger-line rvx-bg-danger-soft rvx-px-space16 rvx-py-space16 rvx-text-danger" role="alert">
  {% include 'storefront/ui/icon.twig' with { name: 'error', size: 22, class: 'rvx-shrink-0' } %}
  <p class="rvx-text-base rvx-flex-1 rvx-text-center sm:rvx-text-start">{{ __('Reviews could not be loaded right now.', 'reviewx') }}</p>
  {% include 'storefront/ui/button.twig' with { label: __('Try again', 'reviewx'), variant: 'secondary', size: 'sm', icon: 'refresh', attrs: '@click="' ~ retry|default('load()') ~ '"' } %}
</div>