<!-- section/quick-order-list.liquid -->
{%- unless product.has_only_default_variant or product.variants.size == 1 or product.available == false -%}
  {% style %}
    #shopify-section-{{ section.id }}{
      --section-pt: {{ section.settings.padding_top }}px;
      --section-pb: {{ section.settings.padding_bottom }}px; 
      --section-prate: {{ section.settings.padding_rate }};
    }
  {% endstyle %}
  {{ 'hdt-quick-order-list.css' | asset_url | stylesheet_tag }}
  {% # theme-check-disable %}
  {%-liquid
    assign items_in_cart = cart | line_items_for: product | sum: 'quantity'
    assign show_image = section.settings.show_image
    if settings.currency_code_enabled
      assign total_variant_in_cart = cart | line_items_for: product | sum: 'original_line_price' | money_with_currency
    else
      assign total_variant_in_cart = cart | line_items_for: product | sum: 'original_line_price' | money
    endif
  -%}
  {% # theme-check-enable %}
  <div class="hdt-s-gradient hdt-section-spacing" color-scheme="{{ section.settings.color_scheme }}">
    <hdt-quick-order-list id="hdt-quick-order-list-{{ section.id }}" data-section-id="{{ section.id }}" class="hdt-container hdt-block">
      <div class="hdt-qol-head hdt-row-flex hdt-flex-cols-1 md:hdt-flex-cols-4">
        <div class="hdt-col hdt-hidden md:hdt-block"> <p class="hdt-s-text hdt-text-lg hdt-font-semibold hdt-text-start">{{ 'sections.quick_order_list.variant' | t }}</p></div>
        <div class="hdt-col hdt-hidden md:hdt-block"><p class="hdt-s-text hdt-text-lg hdt-font-semibold hdt-text-start">{{ 'sections.quick_order_list.quantity' | t }}</p></div>
        <div class="hdt-col hdt-hidden md:hdt-block"> <p class="hdt-s-text hdt-text-lg hdt-font-semibold hdt-text-end">{{ 'sections.quick_order_list.price' | t }}</p></div>
        <div class="hdt-col hdt-hidden md:hdt-block"><p class="hdt-s-text hdt-text-lg hdt-font-semibold hdt-text-end">{{ 'sections.quick_order_list.variant_total' | t }}</p></div>
        <div class="hdt-col hdt-block md:hdt-hidden">
          <p class="hdt-s-text hdt-text-lg hdt-font-semibold hdt-text-start">{{ 'sections.quick_order_list.variants' | t }}</p>
        </div>
      </div>
      <div class="hdt-qol-content">
        <form action="{{ routes.cart_update_url }}" method="post" id="QuickOrderList">
          <div class="quick-order-list__container hdt-ratio--{{ section.settings.image_ratio }}{% unless section.settings.image_size %} hdt-ratio--contain{% endunless %} hdt-qol-showimage-{{ show_image }}" id="hdt-main-variant-items">
            <table class="hdt-quick-order-list__table hdt-w-full">
              <tbody>
                {%-liquid
                  for variant in product.variants
                    if variant.available == false
                      continue
                    endif
                    assign image = variant.image | default: product.featured_media
                    render 'hdt-quick-order-list-row', variant: variant, image: image, product: product, show_image: show_image, image_ratio: section.settings.image_ratio
                  endfor
                -%}
              </tbody>
            </table>
          </div>
        </form>
        <div id="hdt-quick-order-list-total">
          <div class="hdt-total_wrap hdt-row-flex hdt-flex-cols-1 md:hdt-flex-cols-4">
            <div class="hdt-total-item hdt-col md:hdt-text-start">
              <div class="hdt-total-item_inner hdt-flex hdt-flex-col hdt-align-center hdt-justify-center hdt-s-text hdt-font-normal hdt-text-base">
                <span class="hdt-btn-loading__svg">
                  <span class="hdt-qol-text" update_items_in_cart> {{ items_in_cart }}</span>
                  <span class="hdt-loading__spinner hdt-absolute" hidden>
                    <svg width="16" height="16" class="hdt-svg-spinner" focusable="false" role="presentation" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="hdt-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
                  </span>
                </span>
                <p>{{ 'sections.quick_order_list.total_items' | t }}</p>
              </div>
            </div>
            <div class="hdt-col"></div>
            <div class="hdt-total-price hdt-col md:hdt-text-end">
              <div class="hdt-totals__variant-total">
                <span class="hdt-totals__subtotal-value hdt-btn-loading__svg">
                  <span class="hdt-qol-text hdt-money hdt-text-xl hdt-font-semibold hdt-s-text" update_items_price_in_cart>{{ total_variant_in_cart }}</span>
                  <span class="hdt-loading__spinner hdt-absolute" hidden>
                    <svg width="16" height="16" class="hdt-svg-spinner" focusable="false" role="presentation" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="hdt-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
                  </span>
                </span>
                <p class="hdt-totals__subtotal hdt-s-text2 hdt-font-normal hdt-text-base">{{ 'sections.quick_order_list.product_subtotal' | t }}</p>
              </div>
              <small class="hdt-rte hdt-s-text2 hdt-font-normal hdt-text-base">
                {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                  {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                {%- elsif cart.taxes_included -%}
                  {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
                {%- elsif shop.shipping_policy.body != blank -%}
                  {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                {%- else -%}
                  {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
                {%- endif -%}
              </small>
            </div>
            <div class="hdt-viewcart hdt-col md:hdt-order-first md:hdt-text-start">
              <a href="{{ routes.cart_url }} " class="hdt-btn hdt-btn-solid hdt-font-semibold hdt-text-base hdt-relative hdt-oh hdt-inline-flex hdt-align-center hdt-justify-center">
                <span class="hdt-btn-text">{{ 'sections.quick_order_list.view_cart' | t }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </hdt-quick-order-list>
  </div>
{%- endunless -%}

{% schema %}
{
  "name": "t:sections.quick_order_list.name",
  "class": "hdt-qol",
  "tag": "section",
  "limit": 1,
  "enabled_on": {
    "templates": ["product"]
  },
  "settings": [
    {
      "type": "header",
      "content": "t:sections.quick_order_list.settings.notes.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.quick_order_list.settings.notes.content"
    },
    {
      "type": "header",
      "content": "t:sections.quick_order_list.settings.variants_settings.label"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.quick_order_list.settings.variants_settings.show_image.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt_image",
          "label": "t:sections.all.images.ratio.adapt_image.label"
        },
        {
          "value": "square",
          "label": "t:sections.all.images.ratio.square.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.all.images.ratio.portrait.label"
        },
        {
          "value": "asos",
          "label": "t:sections.all.images.ratio.asos.label"
        },
        {
          "value": "landscape",
          "label": "t:sections.all.images.ratio.landscape.label"
        },
        {
          "value": "custom-pr",
          "label": "t:sections.all.images.ratio.custom.label"
        }
      ],
      "label": "t:sections.all.images.ratio.label",
      "default": "adapt_image"
    },
    {
      "type": "checkbox",
      "id": "image_size",
      "label": "t:sections.all.images.size.cover",
      "default": true
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.quick_order_list.settings.variants_settings.color"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ],
  "presets": [
    {
      "name": "t:sections.quick_order_list.name"
    }
  ]
}
{% endschema %}
