{% comment %}
  Renders a list of product's variants

  Accepts:
  - product: {Object} Product Liquid object
  - show_image: {Boolean} Shows image of the variant in the row
  - is_modal: {Boolean} Defines if this snippet lives in a modal (optional)

  Usage:
  {% render 'quick-order-list', product: product %}
{% endcomment %}

{% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
{% # theme-check-disable %}
{%- assign items_in_cart = cart | line_items_for: product | sum: 'quantity' -%}
{% # theme-check-enable %}
<div class="quick-order-list-container color-{{ section.settings.color_scheme }}{% unless is_modal %} gradient{% endunless %}">
  <quick-order-list
    class="page-width section-{{ section.id }}-padding"
    id="{{ section.id }}-{{ product.id }}"
    data-section="{{ section.id }}"
    data-product-id="{{ product.id }}"
    data-url="{{ product.url }}"
  >
    <form
      action="{{ routes.cart_update_url }}"
      class="quick-order-list__contents critical-hidden"
      method="post"
      id="QuickOrderList"
    >
      <div class="quick-order-list__container" id="main-variant-items">
        <div class="js-contents">
          <table class="quick-order-list__table">
            <caption class="visually-hidden">
              {{ 'sections.cart.title' | t }}
            </caption>
            <thead>
              <tr>
                <th class="caption-with-letter-spacing" scope="col">
                  {%- if product.has_only_default_variant -%}
                    {{ 'sections.quick_order_list.product' | t }}
                  {%- else -%}
                    {{ 'sections.quick_order_list.variant' | t }}
                  {%- endif -%}
                </th>
                <th class="large-up-hide right caption-with-letter-spacing" scope="col">
                  {%- if product.has_only_default_variant -%}
                    {{ 'sections.quick_order_list.product_total' | t }}
                  {%- else -%}
                    {{ 'sections.quick_order_list.variant_total' | t }}
                  {%- endif -%}
                </th>
                <th
                  class="quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing"
                  scope="col"
                >
                  {{ 'products.product.quantity.label' | t }}
                </th>
                <th
                  class="quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing"
                  scope="col"
                >
                  {{ 'sections.cart.headings.price' | t }}
                </th>
                <th class="small-hide medium-hide right caption-with-letter-spacing" scope="col">
                  {%- if product.has_only_default_variant -%}
                    {{ 'sections.quick_order_list.product_total' | t }}
                  {%- else -%}
                    {{ 'sections.quick_order_list.variant_total' | t }}
                  {%- endif -%}
                </th>
              </tr>
            </thead>

            <tbody>
              {%- if product.has_only_default_variant -%}
                {%- render 'quick-order-list-row',
                  item: product,
                  image: product.featured_media,
                  sku: product.selected_or_first_available_variant.sku,
                  variant: product.selected_or_first_available_variant,
                  show_image: show_image,
                  show_sku: show_sku,
                  is_modal: is_modal
                -%}
              {%- else -%}
                {%- for variant in product.variants -%}
                  {%- render 'quick-order-list-row',
                    item: variant,
                    image: variant.image,
                    sku: variant.sku,
                    variant: variant,
                    show_image: show_image,
                    show_sku: show_sku,
                    is_modal: is_modal
                  -%}
                {%- endfor -%}
              {%- endif -%}
            </tbody>
          </table>
        </div>
      </div>

      <p
        class="visually-hidden"
        id="quick-order-list-live-region-text-{{ product.id }}"
        aria-live="polite"
        role="status"
      ></p>
      <p
        class="visually-hidden"
        id="shopping-cart-variant-item-status"
        aria-live="polite"
        aria-hidden="true"
        role="status"
      >
        {{ 'accessibility.loading' | t }}
      </p>
    </form>

    {%- if product.has_only_default_variant or product.variants.size == 1 -%}
      <span class="quick-order-list-error">
        {% comment %} Populated by JS {% endcomment %}
      </span>
    {%- else -%}
      <div
        class="quick-order-list__total{% unless is_modal %} gradient{% endunless %}"
        id="quick-order-list-total-{{ product.id }}-{{ section.id }}"
      >
        <div class="quick-order-list-total__info">
          <div class="quick-order-list-total__column small-hide medium-hide">
            <div class="quick-order-list-buttons">
              <a
                href="{{ routes.cart_url }} "
                class="quick-order-list__button button button--secondary small-hide  medium-hide"
              >
                <span class="quick-order-list__button-text">{{- 'sections.quick_order_list.view_cart' | t -}}</span>
              </a>
              <div class="variant-remove-total{% if items_in_cart == 0 %} variant-remove-total--empty{% endif %}">
                {%- render 'loading-spinner' -%}
                <quick-order-list-remove-all-button
                  class="no-js-hidden"
                  data-action="confirm"
                >
                  <button class="button button--tertiary" type="button">
                    {% render 'icon-remove' %}
                    <span class="text-body">{{ 'sections.quick_order_list.remove_all' | t }}</span>
                  </button>
                </quick-order-list-remove-all-button>
              </div>
            </div>
            <span class="quick-order-list__message caption-large" role="status">
              <span class="quick-order-list__message-icon hidden">{%- render 'icon-checkmark' -%}</span>
              <span class="quick-order-list__message-text"></span>
            </span>
            <span class="quick-order-list-error">
              {% comment %} Populated by JS {% endcomment %}
            </span>
          </div>
          <div class="quick-order-list__total-items">
            <span>
              {{ items_in_cart }}
            </span>
            <p class="h5">{{ 'sections.quick_order_list.total_items' | t }}</p>
          </div>
          <div class="quick-order-list-total__price">
            <div class="totals__product-total">
              <span class="totals__subtotal-value">
                {% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
                {% # theme-check-disable %}
                {{ cart | line_items_for: product | sum: 'original_line_price' | money }}
                {% # theme-check-enable %}
              </span>
              <p class="totals__subtotal h5">{{ 'sections.quick_order_list.product_total' | t }}</p>
            </div>
            <small class="tax-note caption-large rte">
              {%- if cart.duties_included and cart.taxes_included -%}
                {%- if shop.shipping_policy.body == blank -%}
                  {{ 'sections.cart.duties_and_taxes_included_shipping_at_checkout_without_policy' | t }}
                {%- else -%}
                  {{ 'sections.cart.duties_and_taxes_included_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }}
                {%- endif -%}  
              {%- elsif cart.duties_included == false and cart.taxes_included -%}
                {%- if shop.shipping_policy.body == blank -%}
                  {{ 'sections.cart.taxes_included_shipping_at_checkout_without_policy' | t }}
                {%- else -%}
                  {{ 'sections.cart.taxes_included_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }}
                {%- endif -%}  
              {%- elsif cart.duties_included and cart.taxes_included == false -%}
                {%- if shop.shipping_policy.body == blank -%}
                  {{ 'sections.cart.duties_included_taxes_at_checkout_shipping_at_checkout_without_policy' | t }}
                {%- else -%}
                  {{ 'sections.cart.duties_included_taxes_at_checkout_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }}
                {%- endif -%}
              {%- elsif cart.duties_included == false and cart.taxes_included == false -%}
                {%- if shop.shipping_policy.body == blank -%}
                  {{ 'sections.cart.taxes_at_checkout_shipping_at_checkout_without_policy' | t }}
                {%- else -%}
                  {{ 'sections.cart.taxes_at_checkout_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }}
                {%- endif -%}
              {%- endif -%}
            </small>
          </div>
          <div class="quick-order-list-total__column large-up-hide">
            <div class="quick-order-list-buttons">
              <a
                href="{{ routes.cart_url }}"
                class="quick-order-list__button button button--secondary button--full-width"
              >
                <span class="quick-order-list__button-text">{{- 'sections.quick_order_list.view_cart' | t -}}</span>
              </a>
              <div class="variant-remove-total">
                {%- render 'loading-spinner' -%}
                <quick-order-list-remove-all-button
                  class="no-js-hidden"
                  data-action="confirm"
                >
                  <button class="button button--tertiary" type="button">
                    {% render 'icon-remove' %}

                    <span class="text-body">{{ 'sections.quick_order_list.remove_all' | t }}</span>
                  </button>
                </quick-order-list-remove-all-button>
              </div>
            </div>
            <span class="quick-order-list__message caption-large" role="status">
              <span class="quick-order-list__message-icon hidden">{%- render 'icon-checkmark' -%}</span>
              <span class="quick-order-list__message-text"></span>
            </span>
            <span class="quick-order-list-error">
              {% comment %} Populated by JS {% endcomment %}
            </span>
          </div>
        </div>
        <div class="quick-order-list-total__confirmation hidden">
          <span class="text-body">
            {{ 'sections.quick_order_list.remove_all_items_confirmation' | t: quantity: items_in_cart }}
          </span>
          <quick-order-list-remove-all-button
            data-action="remove"
          >
            <button
              class="quick-order-list__button-confirm button button--secondary"
              type="button"
            >
              {{- 'sections.quick_order_list.remove_all' | t -}}
            </button>
          </quick-order-list-remove-all-button>
          <quick-order-list-remove-all-button
            data-action="cancel"
          >
            <button
              class="quick-order-list__button-cancel button button--tertiary"
              type="button"
            >
              {{- 'sections.quick_order_list.cancel' | t -}}
            </button>
          </quick-order-list-remove-all-button>
        </div>
      </div>
    {%- endif -%}
  </quick-order-list>
  <template id="QuickOrderListErrorTemplate-{{ product.id }}">
    <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>
    <span class="quick-order-list-error-message caption-large" role="alert"></span>
  </template>
</div>
