<div id="advanced_popup_cart" class="apc-popup-container zoom-anim-dialog">
  <div id="apc-content" class="apc-popup-content apc-text-left">
    <div class="apc-popup-header" id="apc-popup-header">
      <div class="apc-close"></div>
      <h3 class="apc-heading-title">{{ popup_heading }}</h3>
      {% if (popup_subheading and (products_in_cart or vouchers_in_cart)) %}
      <span class="apc-subheading">{{ popup_subheading }}</span>
      {% endif %}
    </div>
    <div class="apc-popup-body" id="apc-popup-body">
      {% if (products_in_cart or vouchers_in_cart) %}
      {% if (attention) %}
      <div class="alert alert-info apc-alert"><i class="fa fa-info-circle"></i> {{ attention }}
        <button type="button" class="close" data-dismiss="alert">×</button>
      </div>
      {% endif %}
      {% if (error_warning) %}
      <div class="alert alert-danger apc-alert"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">×</button>
      </div>
      {% endif %}
      {% if (success) %}
      <div class="alert alert-success apc-alert"><i class="fa fa-check-circle"></i> {{ success }}
        <button type="button" class="close" data-dismiss="alert">×</button>
      </div>
      {% endif %}
      <div class="apc-cart-content">
        {% if (content_top) %}
        <div class="apc-html-block">{{ content_top }}</div>
        {% endif %}
        <div class="apc-cart-table">
          <div class="apc-row apc-row-thead">
            <div class="apc-col apc-col-{{ col_left_class }} ">
              <div class="apc-inner-table">
                {% if (column_image) %}
                <div class="apc-td apc-td-image">{{ text_image }}</div>
                {% endif %}
                <div class="apc-td apc-td-product">{{ text_name }}</div>
              </div>
            </div>
            <div class="apc-col apc-col-{{ col_right_class }} ">
              <div class="apc-inner-table">
                {% if (column_price) %}
                <div class="apc-td apc-td-price">{{ text_price }}</div>
                {% endif %}
                {% if (column_quantity) %}
                <div class="apc-td apc-td-qty">{{ text_quantity }}</div>
                {% endif %}
                <div class="apc-td apc-td-total">{{ text_total }}</div>
                <div class="apc-td apc-td-remove apc-text-right"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
              </div>
            </div>
          </div>
          {% for product in products_in_cart %}
          <div class="apc-row apc-row-tbody" data-apc-item="{{ product['key'] }}">
            <div class="apc-col apc-col-{{ col_left_class }}">
              <div class="apc-inner-table">
                {% if (column_image) %}
                <div class="apc-td apc-td-image">
                  <a href="{{ product['href'] }}">
                    <img src="{{ product['thumb'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="apc-product-image">
                  </a>
                </div>
                {% endif %}
                <div class="apc-td apc-td-product">
                  <a href="{{ product['href'] }}" class="apc-product-name">{{ product['name'] }}</a>
                  {% if (not product['stock']) %}
                  <span class="text-danger">***</span>
                  {% endif %}
                  <div class="apc-product-info-list">
                    {% if (show_model) %}
                    <small>{{ text_model }}: {{ product['model'] }}</small><br>
                    {% endif %}
                    {% if (show_brand and product['brand']) %}
                    <small>{{ text_brand }}: <a href="{{ product['brand_url'] }}">{{ product['brand'] }}</a></small><br>
                    {% endif %}
                    {% if (product['reward']) %}
                    <small>{{ product['reward'] }}</small><br>
                    {% endif %}
                    {% for option in product['option'] %}
                    <small>{{ option['name'] }}: {{ option['value'] }}</small><br>
                    {% endfor %}
                    {% if (product['recurring']) %}
                    <small>{{ text_recurring_item }}: {{ product['recurring'] }}</small><br>
                    {% endif %}
                  </div>
                </div>
                <div class="apc-td apc-td-remove-xs">
                  <button type="button" title="{{ button_remove }}" class="apc-btn-remove" onclick="apc.RemoveFromCart('{{ product['key'] }}', 'popup')">
                    <i class="fa fa-times-circle"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="apc-col apc-col-{{ col_right_class }} apc-col-right">
              <div class="apc-inner-table">
                {% if (column_price) %}
                <div class="apc-td apc-td-price">
                  <div class="apc-text-price-xs">{{ text_price }}</div>
                  <span>{{ product['price'] }}</span>
                </div>
                {% endif %}
                {% if (column_quantity) %}
                <div class="apc-td apc-td-qty">
                  <div class="apc-qty-block">
                    <div class="apc-qty-group">
                      <span class="apc-qty-group-btn">
                        <button type="button" class="btn btn-primary apc-btn-minus" onclick="apc.ChangeQty('{{ product['key'] }}', '-1')">
                          <i class="fa fa-minus"></i>
                        </button>
                      </span>
                      <input type="number" class="form-control apc-qty-input" name="apc_qty_{{ product['key'] }}" value="{{ product['quantity'] }}" autocomplete="off" onchange="apc.EditCart('{{ product['key'] }}', $(this).val())">
                      <span class="apc-qty-group-btn">
                        <button type="button" class="btn btn-primary apc-btn-plus" onclick="apc.ChangeQty('{{ product['key'] }}', '1')">
                          <i class="fa fa-plus"></i>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
                {% endif %}
                <div class="apc-td apc-td-total">
                  <div class="apc-text-price-xs">{{ text_total }}</div>
                  <span>{{ product['total'] }}</span>
                </div>
                <div class="apc-td apc-td-remove apc-text-right">
                  <button type="button" title="{{ button_remove }}" class="apc-btn-remove" onclick="apc.RemoveFromCart('{{ product['key'] }}', 'popup')">
                    <i class="fa fa-times-circle"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
          {% for voucher in vouchers_in_cart %}
          <div class="apc-row apc-row-tbody" data-apc-item="{{ voucher['key'] }}">
            <div class="apc-col apc-col-{{ col_left_class }}">
              <div class="apc-inner-table">
                {% if (column_image) %}
                <div class="apc-td apc-td-image">
                  <img src="{{ voucher['image'] }}" alt="{{ voucher['description'] }}" title="{{ voucher['description'] }}" class="apc-product-image">
                </div>
                {% endif %}
                <div class="apc-td apc-td-product">
                  <span class="apc-voucher-name">{{ voucher['description'] }}</span>
                </div>
                <div class="apc-td apc-td-remove-xs">
                  <button type="button" title="{{ button_remove }}" class="apc-btn-remove" onclick="apc.RemoveFromCart('{{ voucher['key'] }}', 'popup')">
                    <i class="fa fa-times-circle"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="apc-col apc-col-{{ col_right_class }} apc-col-right">
              <div class="apc-inner-table">
                {% if (column_price) %}
                <div class="apc-td apc-td-price"></div>
                {% endif %}
                {% if (column_price) %}
                <div class="apc-td apc-td-qty"></div>
                {% endif %}
                <div class="apc-td apc-td-total">
                  <div class="apc-text-price-xs">{{ text_total }}</div>
                  <span>{{ voucher['amount'] }}</span>
                </div>
                <div class="apc-td apc-td-remove apc-text-right">
                  <button type="button" title="{{ button_remove }}" class="apc-btn-remove" onclick="apc.RemoveFromCart('{{ voucher['key'] }}', 'popup')">
                    <i class="fa fa-times-circle"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% if (content_middle) %}
        <div class="apc-html-block">
          {{ content_middle }}
        </div>
        {% endif %}
        <div class="apc-row apc-todo-next-block">
          <div class="apc-col apc-accordion">
            {% if (coupon_status) %}
            <div class="apc-panel">
              <div class="apc-panel-heading">{{ coupon_title }} <i class="fa fa-caret-down apc-pull-right"></i></div>
              <div class="apc-panel-body">
                <div class="input-group">
                  <input type="text" id="apc_input_coupon" name="coupon" value="{{ coupon }}" autocomplete="off" placeholder="{{ entry_coupon }}" class="form-control">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-primary apc-btn-apply" title="{{ button_coupon }}" id="apc-btn-coupon"><i class="fa fa-check"></i></button>
                  </span>
                </div>
              </div>
            </div>
            {% endif %}
            {% if (voucher_status) %}
            <div class="apc-panel">
              <div class="apc-panel-heading">{{ voucher_title }} <i class="fa fa-caret-down apc-pull-right"></i></div>
              <div class="apc-panel-body">
                <div class="input-group">
                  <input type="text" id="apc_input_voucher" name="voucher" value="{{ use_voucher }}" autocomplete="off" placeholder="{{ entry_voucher }}" class="form-control">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-primary apc-btn-apply" title="{{ button_voucher }}" id="apc-btn-voucher"><i class="fa fa-check"></i></button>
                  </span>
                </div>
              </div>
            </div>
            {% endif %}
            {% if (reward_status) %}
            <div class="apc-panel">
              <div class="apc-panel-heading">{{ text_use_reward }} <i class="fa fa-caret-down apc-pull-right"></i></div>
              <div class="apc-panel-body">
                <div class="input-group">
                  <input type="text" id="apc_input_reward" name="reward" value="{{ reward }}" autocomplete="off" placeholder="{{ entry_reward }}" class="form-control">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-primary apc-btn-apply" title="{{ button_reward }}" id="apc-btn-reward"><i class="fa fa-check"></i></button>
                  </span>
                </div>
              </div>
            </div>
            {% endif %}
            {% if (shipping_status) %}
            <div class="apc-panel">
              <div class="apc-panel-heading">{{ apc_shipping_title }} <i class="fa fa-caret-down apc-pull-right"></i></div>
              <div class="apc-panel-body apc-panel-shipping">
                <div class="form-group required">
                  <label class="control-label" for="apc_input_country">{{ entry_country }}</label>
                  <select name="country_id" id="apc_input_country" class="form-control">
                    <option value="">{{ text_select }}</option>
                    {% for country in countries %}
                    {% if (country['country_id'] == country_id) %}
                    <option value="{{ country['country_id'] }}" selected="selected">{{ country['name'] }}</option>
                    {% else %}
                    <option value="{{ country['country_id'] }}">{{ country['name'] }}</option>
                    {% endif %}
                    {% endfor %}
                  </select>
                </div>
                <div class="form-group required">
                  <label class="control-label" for="apc_input_zone">{{ entry_zone }}</label>
                  <select name="zone_id" id="apc_input_zone" class="form-control">
                  </select>
                </div>
                <div class="form-group apc-postcode-form">
                  <label class="control-label" for="apc_input_postcode">{{ entry_postcode }}</label>
                  <input type="text" name="postcode" id="apc_input_postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" class="form-control">
                </div>
                <div class="form-group">
                  <button type="button" class="btn btn-primary apc-btn-quotes" id="apc-btn-quotes">{{ button_quote }} <i class="fa fa-caret-down"></i></button>
                </div>
                <div id="apc-shipping-quotes" style="display: none;">
                  <div id="apc-quotes-container"></div>
                  <div class="apc-row apc-shipping-buttons">
                    <div class="apc-pull-left">
                      <button type="button" class="btn btn-default apc-btn-continue" id="apc-btn-cancel-shipping">{{ button_cancel }}</button>
                    </div>
                    <div class="apc-pull-right">
                      <button type="button" class="btn btn-primary" id="apc-btn-apply-shipping" disabled="disabled">{{ button_shipping }}</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
          </div>
          <div class="apc-col apc-totals">
            {% if (totals is defined) %}
            <div class="apc-totals-table apc-text-right">
              {% for total in totals %}
              <div class="apc-totals-item">
                <div class="apc-totals-name">
                  <strong>{{ total['title'] }}: </strong>
                </div>
                <div class="apc-totals-value">
                  <span>{{ total['text'] }}</span>
                </div>
              </div>
              {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>
        {% if (content_bottom) %}
        <div class="apc-html-block">{{ content_bottom }}</div>
        {% endif %}
      </div>
      <div class="apc-row apc-buttons">
        <div class="apc-col apc-button-col">
          {% if (btn_continue_status) %}
          <a type="button" class="btn btn-default apc-button apc-btn-continue" id="apc-btn-continue">{{ button_continue }}</a>
          {% endif %}
        </div>
        <div class="apc-col apc-button-col">
          {% if (btn_go_to_cart_status) %}
          <a type="button" class="btn btn-default apc-button apc-btn-view-cart" href="{{ cart_page_url }}">{{ button_go_to_cart }}</a>
          {% endif %}
        </div>
        <div class="apc-col apc-button-col">
          {% if (btn_checkout_status) %}
          <a type="button" class="btn btn-primary apc-button apc-btn-checkout" href="{{ checkout_page_url }}">{{ button_checkout }}</a>
          {% endif %}
        </div>
      </div>
      {% else %}
      <div class="apc-empty-cart-content">
        <div class="apc-empty-cart-block">
          <i class="fa fa-shopping-cart apc-empty-cart-image"></i>
          <h4>{{ text_empty_cart }}</h4>
        </div>
        {% if (btn_start_shopping_status) %}
        <div class="apc-empty-cart-buttons">
          <button type="button" class="btn btn-primary apc-btn-start-shopping" id="apc-btn-start-shopping">{{ text_start_shopping_button }}</button>
        </div>
        {% endif %}
      </div>
      {% endif %}
    </div>
    {% if (related_products) %}
    <div class="apc-related-block">
      <h4 class="apc-related-heading">{{ related_heading }}</h4>
      <div id="apc-carousel" class="apc-related-carousel">
        <div class="swiper-wrapper">
          {% for product in related_products %}
          <div class="apc-carousel-item swiper-slide">
            <div class="apc-related-thumb">
              <div class="apc-related-img-block">
                <a href="{{ product['href'] }}" class="apc-related-img-link">
                  <img src="{{ product['thumb'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="apc-related-img">
                </a>
                {% if (product['rating']) %}
                <div class="apc-rating">
                  {% set i = 1 %}{% for i in i..5 %}
                  {% if (product['rating'] < i) %}
                  <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                  {% else %}
                  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                  {% endif %}
                  {% endfor %}
                </div>
                {% endif %}
              </div>
              <div class="apc-related-caption">
                <div class="apc-related-name">
                  <a href="{{ product['href'] }}" title="{{ product['name'] }}">{{ product['name'] }}</a>
                </div>
                {% if (product['price']) %}
                <div class="apc-price-block">
                  {% if (not product['special']) %}
                  <span class="apc-price">{{ product['price'] }}</span>
                  {% else %}
                  <span class="apc-price-new">{{ product['special'] }}</span> <span class="apc-price-old">{{ product['price'] }}</span>
                  {% endif %}
                </div>
                {% endif %}
              </div>
              <div class="apc-related-btn-group">
                <button type="button" class="btn btn-primary btn-sm apc-btn-cart-add" onclick="apc.AddToCartRelated('{{ product['product_id'] }}')">{{ button_cart }}</button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="swiper-pager">
          <div class="apc-related-btn-prev"></div>
          <div class="apc-related-btn-next"></div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
