{% comment %}
Sale Info Block (TSR) — minimal styling
- Accordion uses theme’s native markup (so +/– toggle works)
- Tooltip (“i”) mode uses unfilled circled i, aligned right
- No extra padding or custom block spacing
{% endcomment %}

{% assign mode = block.settings.display_mode %}
{% assign heading = block.settings.heading %}
{% assign body = block.settings.body %}
{% assign open_by_default = block.settings.open_by_default %}

{%- comment -%} Tag visibility logic {%- endcomment -%}
{% assign tags_raw = block.settings.tags | default: '' | replace: ', ', ',' | replace: ' ,', ',' %}
{% assign tags_csv = tags_raw | split: ',' %}

{% assign has_match = false %}
{% for t in tags_csv %}
  {% assign t_clean = t | strip %}
  {% if t_clean != blank and product.tags contains t_clean %}
    {% assign has_match = true %}
    {% break %}
  {% endif %}
{% endfor %}

{% assign show_block = true %}
{% if tags_csv.first != blank %}
  {% if block.settings.tag_mode == 'include' %}
    {% if has_match %}
      {% assign show_block = true %}
    {% else %}
      {% assign show_block = false %}
    {% endif %}
  {% elsif block.settings.tag_mode == 'exclude' %}
    {% if has_match %}
      {% assign show_block = false %}
    {% else %}
      {% assign show_block = true %}
    {% endif %}
  {% endif %}
{% endif %}

{% if show_block %}
  <div class="tsr-sale-block color-{{ block.settings.color_scheme }} gradient">
    <style>
      /* only style the tooltip (i) */
      .tsr-sale-block .tsr-i {
        display: inline-flex; align-items: center; justify-content: center;
        width: 20px; height: 20px; border-radius: 50%;
        border: 1.5px solid currentColor;
        background: none;
        font-size: 12px; line-height: 1; user-select: none;
      }
      .tsr-sale-block .tsr-tooltip { position: relative; display: inline-block; }
      .tsr-sale-block .tsr-tooltip[data-open="true"] .tsr-tooltip-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .tsr-sale-block .tsr-tooltip-panel {
        position: absolute; right: 0; top: calc(100% + 8px);
        min-width: 240px; background: rgba(0,0,0,0.8); color: #fff;
        padding: .75rem .9rem; border-radius: .5rem; opacity: 0; transform: translateY(4px);
        transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 40;
      }
      .tsr-sale-block .tsr-tooltip-panel a { color: #fff; text-decoration: underline; }
    </style>

    {% if mode == 'accordion' %}
      {{ 'section-accordions.css' | asset_url | stylesheet_tag }}
      <accordion-default class="accordion product__accordion" data-hide-multiple>
        <details class="accordion__section" id="SaleDetails-{{ block.id }}" {% if open_by_default %}open{% endif %} {{ block.shopify_attributes }}>
          <summary class="accordion__button h5 js-btn" id="SaleDetails-Summary-{{ block.id }}">
            <span>{{- heading -}}</span>
            <div class="accordion__icon">
              {%- render 'icon', icon_name: 'theme-minus' -%}
              {%- render 'icon', icon_name: 'theme-minus' -%}
            </div>
          </summary>
          <div class="accordion__body" id="SaleDetails-Content-{{ block.id }}">
            <div class="accordion__body-inner">
              <div class="rte">{{ body }}</div>
            </div>
          </div>
        </details>
      </accordion-default>
    {% else %}
      <div class="tsr-sale-inline">
        <div class="tsr-sale-heading h5" style="display:flex;align-items:center;justify-content:space-between;">
          <span>{{ heading }}</span>
          <span class="tsr-tooltip" data-open="false">
            <button type="button" class="tsr-i" aria-expanded="false" aria-controls="tsr-tip-{{ block.id }}">i</button>
            <div id="tsr-tip-{{ block.id }}" class="tsr-tooltip-panel rte" role="dialog" aria-modal="false">
              {{ body }}
            </div>
          </span>
        </div>
      </div>
      <script>
        (function(){
          var container = document.currentScript.previousElementSibling;
          if(!container) return;
          var wrap = container.querySelector('.tsr-tooltip');
          if(!wrap) return;
          var btn = wrap.querySelector('button');
          btn.addEventListener('click', function(){
            var open = wrap.getAttribute('data-open') === 'true';
            wrap.setAttribute('data-open', open ? 'false' : 'true');
            btn.setAttribute('aria-expanded', open ? 'false' : 'true');
          });
          document.addEventListener('click', function(e){
            if(!wrap.contains(e.target)) {
              wrap.setAttribute('data-open','false');
              btn.setAttribute('aria-expanded','false');
            }
          });
        })();
      </script>
    {% endif %}
  </div>
{% endif %}