{%- doc -%}
  Renders the cart summary totals.

  @param {string} [accelerated_checkout_buttons_layout] - { 'vertical' } Forced layout of the additional checkout buttons, instead of relying on platform's layout.
  @param {string} [section_id] - The section ID for cart discount component.
{%- enddoc -%}

{% render 'text-component-shimmer-styles' %}
{% render 'cart-typography-styles' %}

<div class="cart-totals">
  {% # We need to keep this node in place to allow morphing to work properly # %}
  <div class="cart-totals__original-container cart-primary-typography">
    {%- if cart.cart_level_discount_applications.size > 0 -%}
      <span class="cart-totals__item cart-totals__original">
        <span class="cart-totals__original-label">{{ 'content.cart_subtotal' | t }}</span>
        <span
          class="cart-totals__original-value cart-secondary-typography"
          data-testid="cart-subtotal-value"
        >
          <bdi>{{- cart.items_subtotal_price | money -}}</bdi>
        </span>
      </span>
      <ul
        class="cart-discounts"
        role="list"
        aria-label="{{ 'content.discounts' | t }}"
      >
        {%- for discount in cart.cart_level_discount_applications -%}
          <li class="cart-discounts__item">
            <span class="cart-discounts__label">
              {{- 'icon-discount.svg' | inline_asset_content -}}
              <bdi>{{ discount.title | escape }}</bdi>
            </span>
            <span class="cart-discounts__value cart-secondary-typography"
              ><bdi>-{{ discount.total_allocated_amount | money }}</bdi>
            </span>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>

  {% if settings.show_cart_note or settings.show_add_discount_code %}
    <div class="cart-actions">
      {% if settings.show_cart_note %}
        <cart-note style="display: flex;">
          {% capture cart_note_accordion_children %}
            <details
              {% if settings.cart_note_open_by_default %}
                open
              {% endif %}
            >
              <summary class="cart-note__summary">
                <span class="cart-note__label cart-primary-typography">
                  {{ 'content.seller_note' | t }}
                </span>

                <span class="cart-totals__icon">
                  {{- 'icon-plus.svg' | inline_asset_content -}}
                </span>
              </summary>

              <div class="details-content cart-note__inner">
                <label
                  for="cart-note"
                  class="visually-hidden"
                >
                  {{- 'content.seller_note' | t -}}
                </label>
                <textarea
                  form="cart-form"
                  on:input="/updateCartNote"
                  id="cart-note"
                  class="cart-note__instructions"
                  name="note"
                  data-skip-node-update
                >{{ cart.note }}</textarea>
              </div>
            </details>
          {% endcapture %}
          {% render 'accordion-custom-component',
            children: cart_note_accordion_children,
            class: 'cart-note',
            open_by_default_on_desktop: settings.cart_note_open_by_default,
            open_by_default_on_mobile: settings.cart_note_open_by_default
          %}
        </cart-note>
      {% endif %}
      {% if settings.show_cart_note and settings.show_add_discount_code %}
        <div class="cart-actions__divider"></div>
      {% endif %}
      {% if settings.show_add_discount_code %}
        {% liquid
          assign discount_codes = cart.cart_level_discount_applications | where: 'type', 'discount_code' | map: 'title'
          for item in cart.items
            for allocation in item.line_level_discount_allocations
              if allocation.discount_application.type == 'discount_code'
                assign discount_codes = item.line_level_discount_allocations | slice: forloop.index0 | map: 'discount_application' | map: 'title' | concat: discount_codes
              endif
            endfor
          endfor

          assign discount_codes = discount_codes | uniq

          # Evaluate the boolean expression for the disclosure state
          if discount_codes.size == 0
            assign disclosure_expanded = false
          else
            assign disclosure_expanded = true
          endif
        %}

        {% capture cart_discount_accordion_children %}
          <details
            {% if disclosure_expanded %}
              open
            {% endif %}
          >
            <summary class="cart-discount__summary">
              <span class="cart-discount__label cart-primary-typography">{{ 'content.discount' | t }}</span>

              <span class="cart-totals__icon">
                {{- 'icon-plus.svg' | inline_asset_content -}}
              </span>
            </summary>

            <div class="details-content">
              <div id="cart-discount-disclosure">
                <cart-discount-component
                  {% if section_id != blank %}
                    data-section-id="{{ section_id }}"
                  {% endif %}
                >
                  <div class="cart-discount__content">
                    <form
                      on:submit="/applyDiscount"
                      onsubmit="return false;"
                      class="cart-discount__form"
                    >
                      <label
                        for="cart-discount"
                        class="visually-hidden"
                      >
                        {{- 'accessibility.discount' | t -}}
                      </label>
                      <input
                        id="cart-discount"
                        class="cart-discount__input"
                        type="text"
                        name="discount"
                        size="8"
                        placeholder="{{ 'content.discount_code' | t }}"
                        required
                        data-skip-node-update
                      >
                      <button
                        type="submit"
                        class="button cart-discount__button"
                      >
                        {{ 'actions.apply' | t }}
                      </button>
                    </form>
                  </div>
                  <div
                    class="cart-discount__error hidden"
                    role="alert"
                    ref="cartDiscountError"
                  >
                    <span class="svg-wrapper">
                      {{- 'icon-error.svg' | inline_asset_content -}}
                    </span>
                    <small
                      class="cart-discount__error-text cart-primary-typography hidden"
                      ref="cartDiscountErrorDiscountCode"
                    >
                      {{ 'content.discount_code_error' | t: code: 'test' }}
                    </small>
                    <small
                      class="cart-discount__error-text cart-primary-typography hidden"
                      ref="cartDiscountErrorShipping"
                    >
                      {{ 'content.shipping_discount_error' | t }}
                    </small>
                  </div>
                  <ul class="cart-discount__codes">
                    {% for discount_code in discount_codes %}
                      <li
                        class="cart-discount__pill"
                        data-discount-code="{{ discount_code }}"
                        aria-label="{{ 'accessibility.discount_applied' | t: code: discount_code }}"
                      >
                        <p class="cart-discount__pill-code">
                          <bdi>{{ discount_code }}</bdi>
                        </p>
                        <button
                          type="button"
                          on:click="/removeDiscount"
                          class="cart-discount__pill-remove svg-wrapper svg-wrapper--smaller button-unstyled"
                          aria-label="{{ 'actions.remove_discount' | t: code: discount_code }}"
                        >
                          {{- 'icon-filters-close.svg' | inline_asset_content -}}
                        </button>
                      </li>
                    {% endfor %}
                  </ul>
                </cart-discount-component>
              </div>
            </div>
          </details>
        {% endcapture %}
        {% render 'accordion-custom-component', children: cart_discount_accordion_children, class: 'cart-discount' %}
      {% endif %}
    </div>
  {% endif %}

  {%- liquid
    if settings.currency_code_enabled_cart_total
      assign total_price = cart.total_price | money_with_currency
    else
      assign total_price = cart.total_price | money
    endif
  -%}

  <div class="cart-totals__container{% if settings.show_installments %} cart-totals__container--has-installments{% endif %}">
    <span
      class="cart-totals__item cart-totals__total"
      role="status"
    >
      <span class="cart-totals__total-label cart-primary-typography">{{ 'content.cart_estimated_total' | t }}</span>
      <text-component
        ref="cartTotal"
        value="{{ total_price | strip_html }}"
        class="cart-totals__total-value cart-secondary-typography"
        {% comment %} Used by payment_terms web component {% endcomment %}
        data-testid="cart-total-value"
        data-cart-subtotal
      >
        <bdi>{{ total_price }}</bdi>
      </text-component>
    </span>
    {% if settings.show_installments %}
      <span class="cart-totals__item cart-totals__installments">
        {% form 'cart', cart %}
          {{ form | payment_terms }}
        {% endform %}
      </span>
    {% endif %}
    <div class="cart-totals__item cart-totals__tax-note cart-primary-typography">
      {% render 'tax-info', has_discounts_enabled: settings.show_add_discount_code %}
    </div>
  </div>
</div>

<div class="cart__ctas">
  <button
    type="submit"
    id="checkout"
    class="cart__checkout-button button"
    name="checkout"
    {% if cart == empty %}
      disabled
    {% endif %}
    form="cart-form"
  >
    <span class="button-text">
      {{ 'content.checkout' | t }}
    </span>
  </button>

  {% if additional_checkout_buttons and settings.show_accelerated_checkout_buttons %}
    <div
      class="
        additional-checkout-buttons
        {% if accelerated_checkout_buttons_layout == 'vertical' %}additional-checkout-buttons--vertical{% endif %}
      "
    >
      {{ content_for_additional_checkout_buttons }}
    </div>
  {% endif %}
</div>

{% stylesheet %}
  .cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
{% endstylesheet %}