{% extends 'site/base.html' %}
{% load static %}

{% block title %}

{% endblock title %}


{% block css %}
<link rel="stylesheet" href="{% static 'css/checkout.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">



{% endblock css %}


{% block content %}


<section class="inner-section sm-banner single-banner"
  style="background: url('/static/images/single-banner.jpg') no-repeat center;">
  <div class="container">
    <h3>WishList</h3>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">shop</a></li>
      <li class="breadcrumb-item active" aria-current="page">wishlist</li>
    </ol>
  </div>
</section>
<section class="inner-section checkout-part">
  <div class="container">
    <div class="row" x-data="wishlistComponent">
      <div  id="checkoutForm">

        {% if not request.user.is_authenticated %}
        <div class="col-lg-12">
          <div class="alert-info">
            <p>Returning customer? <a href="{% url 'login' %}">Click here to login</a></p>
          </div>
        </div>
        {% endif %}
        <div class="col-lg-12 cart-table-all">
          <div class="account-card">
            <div class="account-title">
              <h4>Your order</h4>
            </div>



            <div>
              <template x-if="wishCartItems.length > 0">
                <div class="account-content">
                  <div class="table-scroll">
                    <table class="table-list">
                      <thead>
                        <tr>
                          <th scope="col">Product</th>
                          <th scope="col">Name</th>
                          <th scope="col">Price</th>
                          <th scope="col">action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <template x-for="(item, index) in wishCartItems" :key="index">
                          <tr>
                            <td class="table-image"><img x-bind:src="item.img" alt="product"></td>
                            <td class="table-name">
                              <h6 x-text="item.title"></h6>
                            </td>
                            <td class="table-price">
                              <h6 x-text="item.price"></h6>
                            </td>



                            <td class="table-action">
                              <button type="button" class=" btn btn-inline me-2" title="Remove" style="padding : 5px 10px"
                              @click="addToCart(item)"
                              
                             >
                                 add to cart
                              </button>
                              
                              <a class="trash" title="Remove" @click="removeFromWishlist(item.product)">
                                <i class="icofont-trash"></i>
                              </a>
                            </td>
                          </tr>
                        </template>
                      </tbody>
                    </table>
                  </div>

                  <div class="checkout-charge">
                    <ul>
     
                      <li><span>Total Items</span><span x-text="totalItems"></span></li>

                    </ul>
                  </div>
                </div>
              </template>
              <template x-if="wishCartItems.length === 0">
                <p>No items in the cart</p>
              </template>

            </div>







          </div>
        </div>


        <div class="checkout-proced my-2">
          <div class="account-card  py-3">
            <a href="{% url 'checkout' %}" type="botton" class="btn btn-inline">Proceed to Checkout</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>



{% include 'site/includes/newsletter.html' %}


{% endblock content %}



{% block js %}
{% include 'site/page/order/js_files/wishlist_js.html' %}
{% endblock js %}