{% comment %}
  Variant List Row

  Accepts:
  - item: {Object} Variant or Product object
  - sku: {String} Sku of Product or Variant (optional)
  - image: {Object} Product or Variant image (optional)
  Usage:
  {% render 'quick-order-list-row' variant: variant %}
{% endcomment %}

{% # theme-check-disable %}
{% assign cart_qty = cart | item_count_for_variant: variant.id %}
{% # theme-check-enable %}

<tr
  class="variant-item{% unless show_image %} variant-item--no-media{% endunless %}{% if item.available and item.unit_price_measurement %} variant-item--unit-price{% endif %}"
  id="Variant-{{ variant.id }}"
  data-variant-id="{{ variant.id }}"
  data-cart-qty="{{ cart_qty }}"
>
  <td class="variant-item__inner{% unless sku and show_sku %} variant-item__inner--no-sku{% endunless %}">
    {%- if show_image -%}
      <div class="variant-item__media">
        <div class="variant-item__image-container global-media-settings{% unless is_modal %} gradient{% endunless %}{% unless image %} variant-item__image-container--no-img{% endunless %}">
          {% if image %}
            {%- assign img_height = 43 | divided_by: image.aspect_ratio | ceil -%}
            {{
              image
              | image_url: width: 86
              | image_tag:
                loading: 'lazy',
                fetchpriority: 'low',
                decoding: 'async',
                class: 'variant-item__image',
                width: 43,
                height: img_height,
                widths: '86',
                alt: image.alt
              | escape
            }}
          {% endif %}
        </div>
      </div>
    {%- endif -%}
    <div class="small-hide medium-hide">
      <span class="variant-item__name h4 break">{{ item.title | escape }}</span>
      {%- if show_sku -%}
        <span class="variant-item__sku break">{{ sku | escape }}</span>
      {%- endif -%}
    </div>
  </td>

  <td class="variant-item__details large-up-hide">
    <div class="variant-item__info">
      <span class="variant-item__name h4 break">{{ item.title | escape }}</span>
      {%- if show_sku -%}
        <span class="variant-item__sku break">{{ sku | escape }}</span>
      {%- endif -%}
    </div>

    {%- assign item_price = item.price | money -%}
    {%- if item.compare_at_price -%}
      <dl class="variant-item__discounted-prices">
        <dt class="visually-hidden">
          {{ 'products.product.price.regular_price' | t }}
        </dt>
        <dd>
          <s class="variant-item__old-price price price--end">
            {{ item.compare_at_price | money }}
          </s>
        </dd>
        <dt class="visually-hidden">
          {{ 'products.product.price.sale_price' | t }}
        </dt>
        <dd class="price">
          {%- if variant.quantity_price_breaks.size > 0 -%}
            {%- liquid
              assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
            -%}
            <price-per-item
              class="variant-item__price-per-item"
              id="Price-Per-Item-{{ variant.id }}"
              data-variant-id="{{ variant.id }}"
            >
              <div class="price-per-item">
                {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
                  {%- assign variant_price = variant.price | money -%}
                  <span class="price-per-item--current price">
                    {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
                  </span>
                {%- else -%}
                  {%- for price_break in volume_pricing_array -%}
                    {%- if cart_qty >= price_break.minimum_quantity -%}
                      {%- assign price_break_price = price_break.price | money -%}
                      <span class="price-per-item--current price">
                        {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                      </span>
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
              </div>
            </price-per-item>
          {%- else -%}
            <span class="price">
              {{- 'sections.quick_order_list.each' | t: money: item_price -}}
            </span>
          {%- endif -%}
        </dd>
      </dl>
    {%- else -%}
      {%- if variant.quantity_price_breaks.size > 0 -%}
        {%- liquid
          assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
        -%}
        <price-per-item
          class="variant-item__price-per-item"
          id="Price-Per-Item-{{ variant.id }}"
          data-variant-id="{{ variant.id }}"
        >
          <div class="price-per-item">
            {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
              {%- assign variant_price = variant.price | money -%}
              <span class="price-per-item--current price">
                {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
              </span>
            {%- else -%}
              {%- for price_break in volume_pricing_array -%}
                {%- if cart_qty >= price_break.minimum_quantity -%}
                  {%- assign price_break_price = price_break.price | money -%}
                  <span class="price-per-item--current price">
                    {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                  </span>
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
          </div>
        </price-per-item>
      {%- else -%}
        <span class="price">
          {{- 'sections.quick_order_list.each' | t: money: item_price -}}
        </span>
      {%- endif -%}
    {%- endif -%}

    {%- if item.available and item.unit_price_measurement -%}
      <div class="unit-price caption">
        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
        {{ item.unit_price | money }}
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- if item.unit_price_measurement.reference_value != 1 -%}
          {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
      </div>
    {%- endif -%}
  </td>

  <td class="variant-item__totals right large-up-hide">
    {%- render 'loading-spinner' -%}
    {% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
    {% # theme-check-disable %}
    <span class="price">{{ cart | line_items_for: item | sum: 'original_line_price' | money }}</span>
    {% # theme-check-enable %}
  </td>

  <td class="variant-item__quantity">
    {%- liquid
      assign check_against_inventory = true
      if variant.inventory_management != 'shopify' or variant.inventory_policy == 'continue'
        assign check_against_inventory = false
      endif
      if variant.quantity_rule.min > variant.inventory_quantity and check_against_inventory
        assign quantity_rule_soldout = true
      endif

      assign has_qty_rules = false
      if variant.quantity_rule.increment > 1 or variant.quantity_rule.min > 1 or variant.quantity_rule.max != null
        assign has_qty_rules = true
      endif

      assign has_vol_pricing = false
      if variant.quantity_price_breaks.size > 0
        assign has_vol_pricing = true
      endif

      assign is_available = false
      assign has_popover = false
      unless variant.available == false or quantity_rule_soldout
        assign is_available = true
      endunless
      if has_qty_rules or has_vol_pricing
        assign has_popover = true
      endif
    -%}
    <quantity-popover>
      <div class="variant-item__quantity-wrapper quantity-popover-wrapper{% unless has_popover %} variant-item__quantity-wrapper--no-info{% endunless %}">
        <label class="visually-hidden" for="Quantity-{{ variant.id }}">
          {{ 'products.product.quantity.label' | t }}
        </label>
        <div class="quantity-popover-container{% if is_available and has_popover %} quantity-popover-container--hover{% endif %}{% if cart_qty == 0 %} quantity-popover-container--empty{% endif %}">
          {%- if has_qty_rules or has_vol_pricing -%}
            <button
              type="button"
              aria-expanded="false"
              aria-controls="quantity-popover-info-{{ variant.id }}"
              aria-label="
                {%- if has_vol_pricing -%}
                  {{ 'products.product.volume_pricing.note' | t }}
                {%- elsif has_qty_rules -%}
                  {{ 'products.product.quantity.note' | t }}
                {%- endif -%}
              "
              class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide medium-hide no-js-hidden"
            >
              {% render 'icon-info' %}
            </button>
            <div
              class="global-settings-popup quantity-popover__info"
              tabindex="-1"
              hidden
              id="quantity-popover-info-{{ variant.id }}"
            >
              {%- if has_qty_rules == false -%}
                <span class="volume-pricing-label caption">{{ 'products.product.volume_pricing.title' | t }}</span>
              {%- endif -%}
              <div class="quantity__rules caption no-js-hidden">
                {%- if variant.quantity_rule.increment > 1 -%}
                  <span class="divider">
                    {{- 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment -}}
                  </span>
                {%- endif -%}
                {%- if variant.quantity_rule.min > 1 -%}
                  <span class="divider">
                    {{- 'products.product.quantity.min_of' | t: quantity: variant.quantity_rule.min -}}
                  </span>
                {%- endif -%}
                {%- if variant.quantity_rule.max != null -%}
                  <span class="divider">
                    {{- 'products.product.quantity.max_of' | t: quantity: variant.quantity_rule.max -}}
                  </span>
                {%- endif -%}
              </div>
              <button
                class="button-close button button--tertiary large-up-hide"
                type="button"
                aria-label="{{ 'accessibility.close' | t }}"
              >
                {%- render 'icon-close' -%}
              </button>
              {%- if variant.quantity_price_breaks.size > 0 -%}
                <volume-pricing class="parent-display">
                  <ul class="list-unstyled">
                    <li>
                      <span>{{ variant.quantity_rule.min }}+</span>
                      {%- assign price = variant.price | money_with_currency -%}
                      <span>{{ 'sections.quick_order_list.each' | t: money: price }}</span>
                    </li>
                    {%- for price_break in variant.quantity_price_breaks -%}
                      <li>
                        <span>
                          {{- price_break.minimum_quantity -}}
                          <span aria-hidden="true">+</span></span
                        >
                        {%- assign price = price_break.price | money_with_currency -%}
                        <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                      </li>
                    {%- endfor -%}
                  </ul>
                </volume-pricing>
              {%- endif -%}
            </div>
          {%- endif -%}
          {%- if variant.available == false or quantity_rule_soldout -%}
            <span class="variant-item__sold-out"> {{ 'products.product.sold_out' | t }} </span>
          {%- else -%}
            {% comment %} TODO: Remove theme check {% endcomment %}
            {% # theme-check-disable %}
            {% assign cart_qty = cart | item_count_for_variant: variant.id %}
            {% # theme-check-enable %}
            {% render 'quantity-input', variant: variant, min: 0 %}
          {%- endif -%}
        </div>
        {%- if cart_qty > 0 -%}
          <quick-order-list-remove-button
            id="Remove-{{ variant.id }}"
            data-index="{{ variant.id }}"
          >
            <a
              href="{{ item.url_to_remove }}"
              class="button button--tertiary"
              aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
            >
              {% render 'icon-remove' %}
            </a>
          </quick-order-list-remove-button>
        {%- endif -%}
      </div>
      {%- if has_popover -%}
        <button
          type="button"
          class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide"
          aria-expanded="false"
        >
          {% render 'icon-info' %}
          <span>
            {%- if has_vol_pricing -%}
              {{ 'products.product.volume_pricing.note' | t }}
            {%- elsif has_qty_rules -%}
              {{ 'products.product.quantity.note' | t }}
            {%- endif -%}
          </span>
        </button>
      {%- endif -%}
      <div
        class="variant-item__error large-up-hide"
        id="Quick-order-list-item-error-mobile-{{ variant.id }}"
        role="alert"
      >
        <small class="variant-item__error-text"></small>
        <svg
          aria-hidden="true"
          focusable="false"
          class="icon icon-error"
          viewBox="0 0 13 13"
        >
          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
        </svg>
      </div>
    </quantity-popover>
  </td>
  {%- assign item_price = item.price | money -%}
  <td class="variant-item__price small-hide medium-hide">
    {%- if item.compare_at_price -%}
      <dl class="variant-item__discounted-prices">
        <dt class="visually-hidden">
          {{ 'products.product.price.regular_price' | t }}
        </dt>
        <dd>
          <s class="variant-item__old-price price price--end">
            {{ item.compare_at_price | money }}
          </s>
        </dd>
        <dt class="visually-hidden">
          {{ 'products.product.price.sale_price' | t }}
        </dt>
        <dd class="price">
          {%- if variant.quantity_price_breaks.size > 0 -%}
            {%- liquid
              assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
            -%}
            <price-per-item
              class="variant-item__price-per-item"
              id="Price-Per-Item-{{ variant.id }}"
              data-variant-id="{{ variant.id }}"
            >
              <div class="price-per-item">
                {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
                  {%- assign variant_price = variant.price | money -%}
                  <span class="price-per-item--current price">
                    {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
                  </span>
                {%- else -%}
                  {%- for price_break in volume_pricing_array -%}
                    {%- if cart_qty >= price_break.minimum_quantity -%}
                      {%- assign price_break_price = price_break.price | money -%}
                      <span class="price-per-item--current price">
                        {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                      </span>
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
              </div>
            </price-per-item>
          {%- else -%}
            <span class="price">
              {{- 'sections.quick_order_list.each' | t: money: item_price -}}
            </span>
          {%- endif -%}
        </dd>
      </dl>
    {%- else -%}
      {%- if variant.quantity_price_breaks.size > 0 -%}
        {%- liquid
          assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
        -%}
        <price-per-item
          class="variant-item__price-per-item"
          id="Price-Per-Item-{{ variant.id }}"
          data-variant-id="{{ variant.id }}"
        >
          <div class="price-per-item">
            {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
              {%- assign variant_price = variant.price | money -%}
              <span class="price-per-item--current price">
                {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
              </span>
            {%- else -%}
              {%- for price_break in volume_pricing_array -%}
                {%- if cart_qty >= price_break.minimum_quantity -%}
                  {%- assign price_break_price = price_break.price | money -%}
                  <span class="price-per-item--current price">
                    {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                  </span>
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
          </div>
        </price-per-item>
      {%- else -%}
        <span class="price">
          {{- 'sections.quick_order_list.each' | t: money: item_price -}}
        </span>
      {%- endif -%}
    {%- endif -%}

    {%- if item.available and item.unit_price_measurement -%}
      <div class="unit-price caption">
        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
        {{ item.unit_price | money }}
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- if item.unit_price_measurement.reference_value != 1 -%}
          {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
      </div>
    {%- endif -%}
  </td>
  <td class="variant-item__totals right small-hide medium-hide">
    {%- render 'loading-spinner' -%}
    {% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
    {% # theme-check-disable %}
    <span class="price">{{ cart | line_items_for: item | sum: 'original_line_price' | money }}</span>
    {% # theme-check-enable %}
  </td>
</tr>
<tr class="small-hide medium-hide hidden desktop-row-error">
  <td></td>
  <td>
    <div class="variant-item__error" id="Quick-order-list-item-error-desktop-{{ variant.id }}" role="alert">
      <small class="variant-item__error-text"></small>
      <svg
        aria-hidden="true"
        focusable="false"
        class="icon icon-error"
        viewBox="0 0 13 13"
      >
        <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
        <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
        <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
        <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
      </svg>
    </div>
  </td>
  <td></td>
  <td></td>
</tr>

{%- if product.quantity_price_breaks_configured? -%}
  <volume-pricing class="hidden" id="Volume-{{ variant.id }}">
    <ul>
      <li>
        <span>{{ variant.quantity_rule.min }}</span>
        {%- assign price = variant.price | money -%}
        <span data-text="{{ price }}">{{ price }}</span>
      </li>
      {%- for price_break in variant.quantity_price_breaks -%}
        {%- assign price_break_price = price_break.price | money -%}
        <li>
          <span>
            {{- price_break.minimum_quantity -}}
          </span>
          <span data-text="{{ price_break_price }}">{{- price_break.price | money }}</span>
        </li>
      {%- endfor -%}
    </ul>
  </volume-pricing>
{%- endif -%}