<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<span th:if="${cartPage.totalPages > 0}">
<div class="row product-container-padding">
    <div class="col">
        <div class="cart_container">

            <!-- Cart Bar -->
            <div class="cart_bar">
                <ul class="cart_bar_list item_list d-flex flex-row align-items-center justify-content-end">
                    <li class="mr-auto">Product</li>
                    <li class="cart_item_li">Price</li>
                    <li class="cart_item_li">Quantity</li>
                    <li class="cart_item_li">Total</li>
                </ul>
            </div>

            <!-- Cart Items -->
            <div class="cart_items">
                <ul class="cart_items_list">
                    <tr th:each="cartItem : ${cartPage}">
                        <!-- Cart Item 1 -->
                        <li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-lg-end justify-content-start">
                            <div class="product-row d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start mr-auto">
                                <a th:href="'/product/' + ${cartItem.getProduct().getProductId()}">
                                    <div>
                                        <div class="product_image vertical_center"
                                             style="margin-left: 20px; margin-right: 10px">
                                            <img class="review_product_image" alt="Product Cover Image"
                                                 th:src="|data:image/png;base64,${cartItem.getProduct().getEncodedCoverImage()}|"/>
                                        </div>
                                    </div>
                                    <div class="product_name_container">
                                        <div class="cart-product-name" style="max-width: 600px!important;">
                                            <a th:href="'/product/' + ${cartItem.getProduct().getProductId()}"
                                               th:text="${cartItem.getProduct().getProductName()}"></a></div>

                                        <!-- Author -->
                                        <span th:if="${cartItem.getProduct().getProductTypeName() == 'Book' ||
                                                   cartItem.getProduct().getProductTypeName() == 'E-Book' ||
                                                   cartItem.getProduct().getProductTypeName() == 'Audio Book'}">
                                            <div class="cart-product-text" style="max-width: 600px!important;">
                                                <span th:each="authors, iterStat : ${cartItem.getProduct().getAuthors()}"
                                                      th:text="${!iterStat.last} ? ${authors} + ', ': ${authors}">
                                                </span>
                                            </div>
                                        </span>

                                        <!-- Case Brand -->
                                        <span th:if="${cartItem.getProduct().getProductTypeName() == 'E-Book Reader Case' ||
                                                  cartItem.getProduct().getProductTypeName() == 'Book Case'}">
                                            <div class="cart-product-text" style="max-width: 600px!important;"
                                                 th:text="${cartItem.getProduct().getCaseBrand()}">
                                            </div>
                                        </span>

                                        <!-- Tablet Brand -->
                                        <span th:if="${cartItem.getProduct().getProductTypeName() == 'E-Book Reader'}">
                                            <div class="cart-product-text" style="max-width: 600px!important;"
                                                 th:text="${cartItem.getProduct().getReaderBrand()}">
                                            </div>
                                        </span>
                                    </div>
                                </a>
                            </div>

                            <div class="cart_product_price product_text">
                                <div th:if="${cartItem.getProduct().isOnDiscount()}">
                                    <div class="align-items-start justify-content-start">
                                        <!-- when no sale delete -->
                                        <div class="cart_sale_price">
                                            <b th:text="${'%' + #numbers.formatDecimal(cartItem.getProduct().getDiscountRate() * 100, 0, 0) + ' off'}"></b>
                                        </div>

                                        <div class="cart_sale_price">
                                            <del th:text="${'₺' + cartItem.getProduct().getPrice()}"></del>
                                        </div>
                                    </div>
                                </div>
                                <span>Price:</span>
                                <div class="product_total product_text"
                                     th:text="${'₺' + #numbers.formatDecimal(cartItem.getProduct().getPrice() - cartItem.getProduct().getPrice() * cartItem.getProduct().getDiscountRate(),0,2)}"></div>
                            </div>

                            <div class="product_total product_text" th:text="${cartItem.getQuantity()}"></div>

                            <div class="product_total product_text"><span>Total: </span>
                                <span style="display:inline"
                                      th:with="result=${cartItem.getProduct().getPrice() - (cartItem.getProduct().getPrice() * cartItem.getProduct().getDiscountRate())} ,
                                  quantity =${cartItem.getQuantity()},
                                  total=${result*quantity}"
                                      th:text="${'₺' + #numbers.formatDecimal(total,0,2)}"></span>
                            </div>
                        </li>
                    </tr>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row page_nav_row" style="margin-top: 5px">
    <div class="col">
        <div class="page_nav">
            <ul class="d-flex flex-row align-items-start justify-content-center">
                <!-- Previous button -->
                <li th:style="${currentPage == 1} ? 'display:none'">
                    <a th:href="@{/user-details/{id}#cart(id=${user.getUserId()}, size=${cartPage.size}, page=${currentPage - 1})}"
                       aria-label="Previous" title="Previous Page"
                       rel="tooltip">
                        <i class="pagination_arrow fa fa-angle-left"></i>
                    </a>
                </li>

                <!-- First page -->
                <li th:if="${cartPage.totalPages > 0}"
                    th:class="${currentPage == 1} ? 'active'">
                    <a th:href="@{/user-details/{id}#cart(id=${user.getUserId()},size=${cartPage.size}, page=${1})}"
                       th:title="${'Page '+ 1}"
                       th:text="${1}" style="color: #fbaa1d;">
                    </a>
                </li>

                <li th:if="${currentPage - 3 > 1}" class="pagination_dots">...</li>

                <!-- Pages -->
                <li th:if="${cartPage.totalPages > 2}"
                    th:each="i : ${#numbers.sequence(currentPage - 2 > 1 ? currentPage - 2 : 2
                                                                            , cartPage.totalPages > 2 + currentPage ? currentPage + 2 : cartPage.totalPages - 1, 1)}"
                    th:class="${currentPage == i} ? 'active'">
                    <a th:href="@{/user-details/{id}#cart(id=${user.getUserId()},size=${cartPage.size}, page=${i})}"
                       th:text="${i}" th:title="${'Page '+ i}"
                       style="color: #fbaa1d;"></a>
                </li>

                <li th:if="${currentPage + 3 < cartPage.totalPages}"
                    class="pagination_dots">...
                </li>

                <!-- Last page -->
                <li th:if="${cartPage.totalPages > 1}"
                    th:class="${currentPage == cartPage.totalPages} ? 'active'">
                    <a th:href="@{/user-details/{id}#cart(id=${user.getUserId()},size=${cartPage.size}, page=${cartPage.totalPages})}"
                       th:text="${cartPage.totalPages}"
                       style="color: #fbaa1d;"
                       th:title="${'Page '+ cartPage.totalPages}">
                    </a>
                </li>

                <!-- Next button -->
                <li th:style="${currentPage == cartPage.totalPages} ? 'display:none'">
                    <a th:href="@{/user-details/{id}#cart(id=${user.getUserId()},size=${cartPage.size}, page=${currentPage + 1})}"
                       aria-label="Next" title="Next Page" rel="tooltip">
                        <i class="pagination_arrow fa fa-angle-right"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</span>

<span th:unless="${cartPage.totalPages > 0}">
    <div class="warning-text">There are no products.</div>
    <div style="text-align: center; padding-bottom: 30px">
        <img th:src="@{/static/images/no_data.png}">
    </div>
</span>

</html>