{#
  Helpful votes + share menu. `review` = Alpine expression naming the review.
  `scope` ('card' | 'modal') keys the open share menu: the detail modal shows the
  same review as the card behind it, so the key must differ or the card's
  click-outside closes the modal's menu on the same click.
#}
{% set review = review|default('review') %}
{% set scope = scope|default('card') %}
{% set share_key = "'" ~ scope ~ ":' + " ~ review ~ ".wp_unique_id" %}
<footer class="rvx-review-footer rvx-flex rvx-items-center rvx-justify-between rvx-gap-space8 rvx-pt-space8 rvx-border-t rvx-border-line-subtle">
  <div class="rvx-flex rvx-items-center rvx-gap-space5 rvx-min-w-0" x-show="showLikes || showDislikes">
    <span class="rvx-review-footer__text rvx-text-sm rvx-text-fg-subtle rvx-me-[2px]">{{ __('Helpful?', 'reviewx') }}</span>
    <template x-if="showLikes">
      <button type="button"
              class="rvx-review-footer__thumbs rvx-inline-flex rvx-items-center rvx-gap-[4px] rvx-rounded-pill rvx-px-space8 rvx-py-[3px] rvx-text-sm rvx-transition rvx-duration-fast hover:rvx-bg-surface-sunken"
              :class="voted({{ review }}, 1) ? 'rvx-text-merchant rvx-bg-merchant-soft' : 'rvx-text-fg-muted'"
              :aria-pressed="voted({{ review }}, 1)" aria-label="{{ __('Helpful', 'reviewx') }}"
              @click="vote({{ review }}, 1)">
        {% include 'storefront/ui/icon.twig' with { name: 'thumb-up', size: 16, class: 'rvx-review-footer__thumbs--like-icon' } %}
        <span x-text="formatNumber({{ review }}.likes || 0)"></span>
      </button>
    </template>
    <template x-if="showDislikes">
      <button type="button"
              class="rvx-review-footer__thumbs rvx-inline-flex rvx-items-center rvx-gap-[4px] rvx-rounded-pill rvx-px-space8 rvx-py-[3px] rvx-text-sm rvx-transition rvx-duration-fast hover:rvx-bg-surface-sunken"
              :class="voted({{ review }}, 2) ? 'rvx-text-merchant rvx-bg-merchant-soft' : 'rvx-text-fg-muted'"
              :aria-pressed="voted({{ review }}, 2)" aria-label="{{ __('Not helpful', 'reviewx') }}"
              @click="vote({{ review }}, 2)">
        {% include 'storefront/ui/icon.twig' with { name: 'thumb-up', size: 16, class: 'rvx-review-footer__thumbs--dislike-icon rvx-rotate-180' } %}
        <span x-text="formatNumber({{ review }}.dislikes || 0)"></span>
      </button>
    </template>
  </div>

  <div class="rvx-relative rvx-ms-auto" x-show="showShare" @click.outside="if (shareFor === {{ share_key }}) shareFor = null">
    <button type="button" class="rvx-review-share__button rvx-grid rvx-place-items-center rvx-size-8 rvx-rounded-pill rvx-text-fg-muted hover:rvx-bg-surface-sunken hover:rvx-text-fg rvx-transition rvx-duration-fast"
            :aria-expanded="shareFor === {{ share_key }}" aria-haspopup="menu" aria-label="{{ __('Share review', 'reviewx') }}"
            @click="toggleShare({{ review }}, $event, '{{ scope }}')">
      {% include 'storefront/ui/icon.twig' with { name: 'share', size: 18 } %}
    </button>
    <div x-show="shareFor === {{ share_key }}" x-cloak
         x-transition:enter="rvx-transition rvx-duration-fast" x-transition:enter-start="rvx-opacity-0 rvx-scale-95" x-transition:enter-end="rvx-opacity-100 rvx-scale-100"
         class="rvx-absolute rvx-end-0 rvx-z-dropdown rvx-min-w-[180px] rvx-rounded-card rvx-border rvx-border-line rvx-bg-surface rvx-shadow-popover rvx-p-space5"
         :class="shareUp({{ review }}, '{{ scope }}') ? 'rvx-bottom-[calc(100%+6px)] rvx-origin-bottom-right rtl:rvx-origin-bottom-left' : 'rvx-top-[calc(100%+6px)] rvx-origin-top-right rtl:rvx-origin-top-left'"
         role="menu" @keydown="menuKey($event)">
      {% for platform, label in { facebook: 'Facebook', twitter: 'X', linkedin: 'LinkedIn', reddit: 'Reddit' } %}
      <a :href="shareLink('{{ platform }}', {{ review }})" target="_blank" rel="noopener noreferrer" role="menuitem"
         class="rvx-flex rvx-items-center rvx-gap-space8 rvx-rounded-control rvx-px-space12 rvx-py-space8 rvx-text-base rvx-text-fg hover:rvx-bg-surface-sunken">
        {% include 'storefront/ui/icon.twig' with { name: platform == 'twitter' ? 'x' : platform, size: 18, class: 'rvx-text-fg-muted' } %}
        <span>{{ label }}</span>
      </a>
      {% endfor %}
      <button type="button" role="menuitem" class="rvx-flex rvx-w-full rvx-items-center rvx-gap-space8 rvx-rounded-control rvx-px-space12 rvx-py-space8 rvx-text-start rvx-text-base rvx-text-fg hover:rvx-bg-surface-sunken" @click="copyShareLink({{ review }})">
        {% include 'storefront/ui/icon.twig' with { name: 'copy', size: 18, class: 'rvx-text-fg-muted' } %}
        <span>{{ __('Copy link', 'reviewx') }}</span>
      </button>
    </div>
  </div>
</footer>