<!-- /snippets/ajax-cart-template.liquid -->
{% comment %}

  This snippet provides the default handlebars.js templates for
  the ajax cart plugin. Use the raw liquid tags to keep the
  handlebar.js template tags as available hooks.

{% endcomment %}
  <script id="CartTemplate" type="text/template">
  {% raw %}
    <form action="/cart" method="post" novalidate class="cart ajaxcart">
      <div class="ajaxcart__inner ajaxcart__inner--has-fixed-footer">
        {{#items}}
        <div class="ajaxcart__product">
          <div class="ajaxcart__row" data-line="{{line}}">
            <div class="grid">
              <div class="grid__item one-quarter">
                <a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
              </div>
              <div class="grid__item three-quarters">
                <div class="ajaxcart__product-name--wrapper">
                  <a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
                  {{#if variation}}
                    <span class="ajaxcart__product-meta">{{variation}}</span>
                  {{/if}}
                  {{#properties}}
                    {{#each this}}
                      {{#if this}}
                        <span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
                      {{/if}}
                    {{/each}}
                  {{/properties}}
                </div>

                <div class="grid--full display-table">
                  <div class="grid__item display-table-cell one-half">
                    <div class="ajaxcart__qty">
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
                        <span class="icon icon-minus" aria-hidden="true"></span>
                        <span class="fallback-text" aria-hidden="true">&minus;</span>
                      </button>
                      <input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
                      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
                        <span class="icon icon-plus" aria-hidden="true"></span>
                        <span class="fallback-text" aria-hidden="true">+</span>
                      </button>
                    </div>
                  </div>
                  <div class="grid__item display-table-cell one-half text-right">
                    {{#if discountsApplied}}
                      <small class="ajaxcart__price--strikethrough">{{{price}}}</small>
                      <span class="ajaxcart__price">
                        {{{discountedPrice}}}
                      </span>
                    {{else}}
                      <span class="ajaxcart__price">
                        {{{price}}}
                      </span>
                    {{/if}}
                  </div>
                </div>
                {{#if discountsApplied}}
                  <div class="grid--full display-table">
                    <div class="grid__item text-right">
                      {{#each discounts}}
                        <small class="ajaxcart__discount">{{this.title}}</small>
                      {{/each}}
                    </div>
                  </div>
                {{/if}}
              </div>
            </div>
          </div>
        </div>
        {{/items}}

        {% endraw %}{% if settings.cart_notes_enable %}{% raw %}
          <div>
            <label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
            <textarea name="note" class="input-full" id="CartSpecialInstructions">{{note}}</textarea>
          </div>
        {% endraw %}{% endif %}{% raw %}
      </div>
      <div class="ajaxcart__footer ajaxcart__footer--fixed">
        <div class="grid--full">
          <div class="grid__item two-thirds">
            <p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
          </div>
          <div class="grid__item one-third text-right">
            <p class="ajaxcart__subtotal">{{{totalPrice}}}</p>
          </div>
        </div>
        {{#if totalCartDiscount}}
          <p class="ajaxcart__savings text-center">{{{totalCartDiscount}}}</p>
        {{/if}}

        <p class="ajaxcart__policies">{% endraw %}
          {%- capture taxes_shipping_checkout -%}
            {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
            {%- elsif shop.taxes_included -%}
              {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
            {%- elsif shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
            {%- else -%}
              {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
            {%- endif -%}
          {%- endcapture -%}
          {{ taxes_shipping_checkout }}
        {% raw %}</p>
        <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
          {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} <span class="icon icon-arrow-right" aria-hidden="true"></span>
        </button>
      </div>
    </form>
  {% endraw %}
  </script>
  <script id="AjaxQty" type="text/template">
  {% raw %}
    <div class="ajaxcart__qty">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">&minus;</span>
      </button>
      <input type="text" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*">
      <button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">+</span>
      </button>
    </div>
  {% endraw %}
  </script>
  <script id="JsQty" type="text/template">
  {% raw %}
    <div class="js-qty">
      <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
        <span class="icon icon-minus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">&minus;</span>
      </button>
      <input type="text" class="js-qty__num" value="{{itemQty}}" min="1" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
      <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="{{key}}" data-qty="{{itemAdd}}" aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
        <span class="icon icon-plus" aria-hidden="true"></span>
        <span class="fallback-text" aria-hidden="true">+</span>
      </button>
    </div>
  {% endraw %}
  </script>