{%- comment -%}
  Nutrition label popup — main-product.liquid block
  Renders in two "modes":
    mode: 'trigger'  -> the button that opens the modal. Pass placement: 'gallery' or 'rightside'
    mode: 'modal'    -> the modal-dialog itself (render this ONCE, regardless of how many
                        times the trigger is rendered)

  Usage:
    {% render 'nutrition-label-popup', block: block, mode: 'trigger', placement: 'gallery' %}
    {% render 'nutrition-label-popup', block: block, mode: 'trigger', placement: 'rightside' %}
    {% render 'nutrition-label-popup', block: block, mode: 'modal' %}
{%- endcomment -%}

{%- liquid
  assign block_id = block.id
-%}

{%- if mode == 'trigger' -%}

  {%- if placement == 'gallery' -%}
    {%- style -%}
      #NutritionLabelPopup-{{ block_id }},
      .nutrition-label-trigger-{{ block_id }} {
        --nutlabel-btn-bg: {{ block.settings.button_bg_color }};
        --nutlabel-btn-bg-hover: {{ block.settings.button_bg_color_hover }};
        --nutlabel-btn-text: {{ block.settings.button_text_color }};
        --nutlabel-btn-border: {{ block.settings.button_border_color }};
      }

      .nutrition-label-trigger-{{ block_id }} {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-top: {{ block.settings.padding_top }}px;
        padding-bottom: {{ block.settings.padding_bottom }}px;
      }
      .nutrition-label-trigger-{{ block_id }}.mobile-hidden {
        display: none;
      }
      @media screen and (max-width: 989px) {
        .nutrition-label-trigger-{{ block_id }}.desktop-hidden {
          display: flex;
        }
      }
      @media screen and (min-width: 990px) {
        .nutrition-label-trigger-{{ block_id }}.desktop-hidden {
          display: none;
        }
      }

      .nutrition-label-cta-{{ block_id }} {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: {{ block.settings.button_padding_vertical }}px {{ block.settings.button_padding_horizontal }}px;
        background: var(--nutlabel-btn-bg);
        color: var(--nutlabel-btn-text);
        border: 1px solid var(--nutlabel-btn-border);
        border-radius: {{ block.settings.button_border_radius }}px;
        font-family: var(--font-body-family), sans-serif;
        font-size: {{ block.settings.button_font_size }}px;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1;
        cursor: pointer;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
      }
      .nutrition-label-cta-{{ block_id }}:hover {
        background: var(--nutlabel-btn-bg-hover);
      }
      .nutrition-label-cta-{{ block_id }}:active {
        transform: translateY(1px);
      }
      .nutrition-label-cta__icon-{{ block_id }} {
        width: {{ block.settings.icon_size }}px;
        height: {{ block.settings.icon_size }}px;
        flex-shrink: 0;
        color: var(--nutlabel-btn-text);
      }
      .nutrition-label-cta__label-{{ block_id }} {
        line-height: 1;
      }

      /* Desktop placement toggle: gallery vs right side */
      .nutrition-label-trigger-{{ block_id }}[data-placement="rightside"] {
        display: none;
      }
      {%- if block.settings.desktop_position == 'right_side' -%}
      @media screen and (min-width: 990px) {
        .nutrition-label-trigger-{{ block_id }}[data-placement="gallery"] {
          display: none;
        }
        .nutrition-label-trigger-{{ block_id }}[data-placement="rightside"] {
          display: flex;
        }
      }
      {%- endif -%}

      /* Modal styling */
      .nutrition-label-modal-{{ block_id }} .product-popup-modal__content-info {
        background: {{ block.settings.modal_bg_color }};
        border-radius: {{ block.settings.modal_border_radius }}px;
      }
      @media screen and (min-width: 990px) {
        .nutrition-label-modal-{{ block_id }}.product-popup-modal .product-popup-modal__content {
          width: {{ block.settings.desktop_popup_width }}px !important;
          max-width: calc(100% - 4rem) !important;
        }
      }
      .nutrition-label-modal__title-{{ block_id }} {
        color: {{ block.settings.modal_title_color }};
        margin: 0 0 16px;
      }
      .nutrition-label-modal__image-{{ block_id }} {
        margin: 0 0 16px;
      }
      .nutrition-label-modal__image-{{ block_id }} img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: calc({{ block.settings.modal_border_radius }}px / 2);
      }
      .nutrition-label-modal__notes-{{ block_id }} {
        color: {{ block.settings.modal_text_color }};
        font-size: 1.4rem;
        line-height: 1.5;
      }
    {%- endstyle -%}
  {%- endif -%}

  <modal-opener
    class="nutrition-label-trigger-{{ block_id }} {{ block.settings.visibility }}"
    data-modal="#PopupModal-{{ block_id }}"
    data-placement="{{ placement }}"
  >
    <button
      type="button"
      class="nutrition-label-cta-{{ block_id }}"
      aria-haspopup="dialog"
      aria-label="{{ block.settings.button_label }}"
    >
      {%- if block.settings.icon_position == 'after' -%}
        <span class="nutrition-label-cta__label-{{ block_id }}">{{ block.settings.button_label }}</span>
        {%- if block.settings.use_custom_icon and block.settings.custom_icon != blank -%}
          <img
            class="nutrition-label-cta__icon-{{ block_id }}"
            src="{{ block.settings.custom_icon | image_url: width: 100 }}"
            width="{{ block.settings.icon_size }}"
            height="{{ block.settings.icon_size }}"
            alt=""
            loading="lazy"
          >
        {%- else -%}
          <svg class="nutrition-label-cta__icon-{{ block_id }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
            <rect x="5" y="3" width="14" height="18" rx="1.5"></rect>
            <line x1="8" y1="8" x2="16" y2="8"></line>
            <line x1="8" y1="12" x2="16" y2="12"></line>
            <line x1="8" y1="16" x2="13" y2="16"></line>
          </svg>
        {%- endif -%}
      {%- else -%}
        {%- if block.settings.use_custom_icon and block.settings.custom_icon != blank -%}
          <img
            class="nutrition-label-cta__icon-{{ block_id }}"
            src="{{ block.settings.custom_icon | image_url: width: 100 }}"
            width="{{ block.settings.icon_size }}"
            height="{{ block.settings.icon_size }}"
            alt=""
            loading="lazy"
          >
        {%- else -%}
          <svg class="nutrition-label-cta__icon-{{ block_id }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
            <rect x="5" y="3" width="14" height="18" rx="1.5"></rect>
            <line x1="8" y1="8" x2="16" y2="8"></line>
            <line x1="8" y1="12" x2="16" y2="12"></line>
            <line x1="8" y1="16" x2="13" y2="16"></line>
          </svg>
        {%- endif -%}
        <span class="nutrition-label-cta__label-{{ block_id }}">{{ block.settings.button_label }}</span>
      {%- endif -%}
    </button>
  </modal-opener>

{%- endif -%}

{%- if mode == 'modal' -%}
  <modal-dialog
    id="PopupModal-{{ block_id }}"
    class="product-popup-modal nutrition-label-modal-{{ block_id }}"
    {{ block.shopify_attributes }}
  >
    <div
      role="dialog"
      aria-label="{{ block.settings.modal_title | escape }}"
      aria-modal="true"
      class="product-popup-modal__content product-popup-modal__content--centered"
      tabindex="-1"
    >
      <button
        id="ModalClose-{{ block_id }}"
        type="button"
        class="product-popup-modal__toggle"
        aria-label="{{ 'accessibility.close' | t }}"
      >
        {% render 'icon-close' %}
      </button>
      <div class="product-popup-modal__content-info">
        {%- if block.settings.content_source == 'page' and block.settings.content_page != blank -%}
          {%- assign nutlabel_page = block.settings.content_page -%}
          {%- if nutlabel_page.title != blank -%}
            <h3 class="h3 nutrition-label-modal__title-{{ block_id }}">{{ nutlabel_page.title }}</h3>
          {%- elsif block.settings.modal_title != blank -%}
            <h3 class="h3 nutrition-label-modal__title-{{ block_id }}">{{ block.settings.modal_title }}</h3>
          {%- endif -%}
          <div class="nutrition-label-modal__notes-{{ block_id }} rte">
            {{ nutlabel_page.content }}
          </div>
        {%- else -%}
          {%- if block.settings.modal_title != blank -%}
            <h3 class="h3 nutrition-label-modal__title-{{ block_id }}">{{ block.settings.modal_title }}</h3>
          {%- endif -%}

          {%- if block.settings.nutrition_image != blank -%}
            <div class="nutrition-label-modal__image-{{ block_id }}">
              {%- capture nutrition_image_sizes -%}
                (min-width: 750px) 500px, calc(100vw - 4rem)
              {%- endcapture -%}
              {{
                block.settings.nutrition_image
                | image_url: width: 1200
                | image_tag: loading: 'lazy', sizes: nutrition_image_sizes, widths: '350, 550, 750, 1000, 1200', alt: block.settings.modal_title
              }}
            </div>
          {%- endif -%}

          {%- if block.settings.modal_notes != blank -%}
            <div class="nutrition-label-modal__notes-{{ block_id }} rte">
              {{ block.settings.modal_notes }}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>
    </div>
  </modal-dialog>
{%- endif -%}