{{ 'section-main-cart.css' | asset_url | stylesheet_tag }}
{{ 'cart-item.css' | asset_url | stylesheet_tag }}
{{ 'cart-table.css' | asset_url | stylesheet_tag }}
{{ 'cart-totals.css' | asset_url | stylesheet_tag }}
{{ 'cart-free-shipping.css' | asset_url | stylesheet_tag }}
{{ 'cart-note.css' | asset_url | stylesheet_tag }}

{% capture continue_shopping %}
  {% render 'cart-continue-shopping' %}
{% endcapture %}

<div {% render 'section-attr' %}>
  <xo-cart id='{{ section.id }}' class='xo-main-cart section-{{ section.id }}-padding color-{{ section.settings.color_scheme }}'>
    <xo-container class='xo-cart'>
      <xo-animate xo-cascade>
        <xo-cart-will-change xo-unique-id='cart-table-{{ section.id }}'>
          {% if cart != empty %}
            <xo-grid>
              <div style='--md: 12; --lg: {% if cart != empty %}8{% else %}12{% endif %}'>
                {% render 'cart-table' %}
                <xo-cart-will-change xo-unique-id='continue-shopping-{{ section.id }}'>
                  {% render 'space', value: '1rem' %}
                  {{ continue_shopping }}
                </xo-cart-will-change>
              </div>
              <div style='--md: 12; --lg: 4' class='xo-cart__right'>
                {% for block in section.blocks %}
                  {% case block.type %}
                    {% when '@app' %}
                      {% render block %}
                    {% when 'free_shipping' %}
                      {% render 'cart-free-shipping' %}
                      {% render 'space', value: '2rem' %}
                    {% when 'note' %}
                      <xo-cart-will-change xo-unique-id='xo-cart-note-{{ section.id }}'>
                        {% assign type_note = block.settings.type %}
                        {% render 'cart-note', uid: 'main-cart', type: type_note %}
                      </xo-cart-will-change>
                      {% render 'space', value: '2rem' %}
                    {% when 'subtotal' %}
                      {% render 'cart-totals' %}
                      {% render 'cart-tax-note' %}
                      <xo-cart-will-change xo-unique-id='xo-space-2-{{ section.id }}'>
                        {% render 'space', value: '1rem' %}
                      </xo-cart-will-change>
                      {% render 'cart-discount-list' %}
                      {% render 'cart-actions' %}
                      {% render 'space', value: '2rem' %}
                    {% when 'discount' %}
                      <xo-cart-will-change xo-unique-id='xo-cart-discount-{{ section.id }}'>
                        {% assign type_discount = block.settings.type %}
                        {% render 'cart-discount', uid: 'main-cart', type: type_discount %}
                      </xo-cart-will-change>
                    {% when 'shipping' %}
                      <xo-cart-will-change xo-unique-id='xo-cart-shipping-rates-{{ section.id }}'>
                        {% assign type_shipping = block.settings.type %}
                        {% render 'cart-shipping-rates', uid: 'main-cart', type: type_shipping %}
                      </xo-cart-will-change>
                      {% render 'space', value: '2rem' %}
                    {% when 'badge' %}
                      <div class='xo-cart__badge'>
                        <div>{{ 'sections.cart.badge' | t }}</div>
                        {% render 'image', image: block.settings.badge_image %}
                      </div>
                  {% endcase %}
                {% endfor %}
              </div>
            </xo-grid>
          {% else %}
            {% assign title = 'sections.cart.empty' | t %}
            {% render 'empty', title: title, content: continue_shopping %}
          {% endif %}
        </xo-cart-will-change>
      </xo-animate>
    </xo-container>
  </xo-cart>
</div>

{% schema %}
{
  "name": "t:sections.main_cart.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "subtotal",
      "name": "t:sections.main_cart.settings.subtotal.name",
      "limit": 1
    },
    {
      "type": "free_shipping",
      "name": "t:sections.main_cart.settings.free_shipping.name",
      "limit": 1
    },
    {
      "type": "note",
      "name": "t:sections.main_cart.settings.note.name",
      "settings": [
        {
          "type": "select",
          "id": "type",
          "label": "t:sections.main_cart.settings.type_of_note.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.main_cart.settings.option_regular.label"
            },
            {
              "value": "collapse",
              "label": "t:sections.main_cart.settings.option_collapse.label"
            }
          ],
          "default": "regular"
        }
      ],
      "limit": 1
    },
    {
      "type": "discount",
      "name": "t:sections.main_cart.settings.discount.name",
      "settings": [
        {
          "type": "select",
          "id": "type",
          "label": "t:sections.main_cart.settings.type_of_discount.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.main_cart.settings.option_regular.label"
            },
            {
              "value": "collapse",
              "label": "t:sections.main_cart.settings.option_collapse.label"
            }
          ],
          "default": "regular"
        }
      ],
      "limit": 1
    },
    {
      "type": "shipping",
      "name": "t:sections.main_cart.settings.shipping.name",
      "settings": [
        {
          "type": "select",
          "id": "type",
          "label": "t:sections.main_cart.settings.type_of_shipping.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.main_cart.settings.option_regular.label"
            },
            {
              "value": "collapse",
              "label": "t:sections.main_cart.settings.option_collapse.label"
            }
          ],
          "default": "regular"
        }
      ],
      "limit": 1
    },
    {
      "type": "badge",
      "name": "t:sections.main_cart.settings.badge.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "badge_image",
          "label": "t:sections.main_cart.settings.badge_image.label",
          "info": "t:sections.main_cart.settings.badge_image.info"
        }
      ],
      "limit": 1
    }
  ]
}
{% endschema %}
