{%- assign disclosure_surface = surface | default: 'product_page' -%}
{%- assign disclosures = product.metafields.shopify.disclosure.value -%}
{%- assign summary_html = '' -%}
{%- assign details_html = '' -%}
{%- assign rendered_disclosures_count = 0 -%}

{%- if disclosures != blank -%}
  {%- for disclosure in disclosures -%}
    {%- assign surfaces = disclosure.display_preferences.value.surfaces -%}

    {%- if surfaces contains disclosure_surface -%}
      {%- assign title = disclosure.title.value -%}
      {%- assign img = disclosure.symbol.value -%}
      {%- assign content = disclosure.content -%}

      {%- capture summary_item -%}
        {%- if rendered_disclosures_count > 0 -%}
          <span class="disclosures-separator">&bull;</span>
        {%- endif -%}
        <span class="disclosures-summary-item">
          {%- if img != blank -%}
            <img
              src="{{ img | image_url: width: 40 }}"
              srcset="{{ img | image_url: width: 20 }} 1x, {{ img | image_url: width: 40 }} 2x, {{ img | image_url: width: 60 }} 3x"
              alt=""
              class="disclosures__icon"
              width="40"
              height="31"
              loading="lazy"
            >
          {%- endif -%}
          <span class="disclosures-summary-item__title">{{ title }}</span>
          <span class="disclosures-summary-item__open-title">{{ title }}</span>
        </span>
      {%- endcapture -%}

      {%- capture details_item -%}
        <div class="disclosures-item">
          {%- if rendered_disclosures_count > 0 -%}
            {%- if title != blank or img != blank -%}
              <div class="disclosures-item__header">
                {%- if img != blank -%}
                  <img
                    src="{{ img | image_url: width: 40 }}"
                    srcset="{{ img | image_url: width: 20 }} 1x, {{ img | image_url: width: 40 }} 2x, {{ img | image_url: width: 60 }} 3x"
                    alt=""
                    class="disclosures__icon"
                    width="40"
                    height="31"
                    loading="lazy"
                  >
                {%- endif -%}
                {%- if title != blank -%}
                  <span>{{ title }}</span>
                {%- endif -%}
              </div>
            {%- endif -%}
          {%- endif -%}

          <div class="disclosures-item__content">
            {{ content | metafield_tag }}
          </div>
        </div>
      {%- endcapture -%}

      {%- capture summary_html -%}{{ summary_html }}{{ summary_item }}{%- endcapture -%}
      {%- capture details_html -%}{{ details_html }}{{ details_item }}{%- endcapture -%}
      {%- assign rendered_disclosures_count = rendered_disclosures_count | plus: 1 -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{%- if rendered_disclosures_count > 0 -%}
  {{ 'component-disclosures.css' | asset_url | stylesheet_tag }}

  <div
    class="disclosures spacing-style"
    {% if block != blank %}
      {{ block.shopify_attributes }}
    {% endif %}
  >
    {%- if heading != blank -%}
      <h3 class="disclosures__heading {{ heading_size }}">
        {{ heading | escape }}
      </h3>
    {%- endif -%}

    <details
      class="disclosures__details"
      {% if open_by_default %}
        open
      {% endif %}
    >
      <summary class="disclosures__summary">
        <div class="disclosures__summary-content">
          {{ summary_html }}
        </div>
        {{- 'icon-caret.svg' | inline_asset_content -}}
      </summary>

      <disclosures-content class="disclosures__content">
        {{ details_html }}
      </disclosures-content>
    </details>
  </div>

  <script src="{{ 'disclosures.js' | asset_url }}" defer="defer"></script>
{%- endif -%}