{% extends 'base_app.html.twig' %}

{% block title %}
{% trans %}cart{% endtrans %} | {% trans %}app_name{% endtrans %}
{% endblock %}
{% block body_class %}my-account{% endblock %}
{% block body %}
<div id="page-content">        
    <!--Body Container-->
    <!--Breadcrumbs-->
    <div class="breadcrumbs-wrapper">
        <div class="container">
            <div class="breadcrumbs"><a href="index.html" title="Back to the home page">Home</a> <span aria-hidden="true">|</span> <span>Your Cart</span></div>
        </div>
    </div>
    <!--End Breadcrumbs-->
        {% if hasCart == true %}
        <!--Page Title with Image-->
        <div class="page-title"><h1>Votre panier</h1></div>
        <!--End Page Title with Image-->
        <div class="container">
        <div class="row">
            <!--Main Content-->
            <div class="col-12 col-sm-12 col-md-12 col-lg-8 main-col">
                <form action="#" method="post" class="cart style2">
                    <table>
                        <thead class="cart__row cart__header">
                            <tr>
                                <th colspan="2" class="text-center">Product</th>
                                <th class="text-center">Total</th>
                                <th class="action">&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in listItem %}
                            <tr class="cart__row border-bottom line1 cart-flex border-top">
                                <td class="cart__image-wrapper cart-flex-item">
                                    <a href="#"><img class="cart__image" src="{{ asset('front/assets/images/product-images/95x120.jpg') }}" alt="Elastic Waist Dress - Navy / Small"></a>
                                </td>
                                <td class="cart__meta small--text-left cart-flex-item">
                                    <div class="list-view-item__title">
                                        <a href="#">Elastic</a><br />
                                    </div>
                                    <!--<div class="cart__meta-text">
                                        Color: Navy<br>Size: Small<br>
                                    </div>-->
                                    <div class="cart__qty small--text-left">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="icon icon-minus"></i></a>
                                            <input class="cart__qty-input qty" type="text" name="updates[]" id="qty" value="1" pattern="[0-9]*">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="icon icon-plus"></i></a>
                                        </div>
                                    </div>
                                </td>
                                <td class="small--hide cart-price text-center">
                                    <div><span class="money">$735.00</span></div>
                                </td>
                                <td class="text-center small--hide"><a href="#" class="btn btn--secondary cart__remove" title="Remove tem"><i class="icon icon anm anm-times-l"></i></a></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3" class="text-left"><a href="/" class="btn btn--link btn--small cart-continue"><i class="anm anm-chevron-cir-left"></i> Continue shopping</a></td>
                                <td colspan="3" class="text-right">
                                    <button type="submit" name="clear" class="btn btn--link btn--small small--hide"><i class="icon icon anm anm-times-l"></i> Clear Shoping Cart</button>
                                    <button type="submit" name="update" class="btn btn--link btn--small cart-continue ml-2"><i class="anm anm-sync-ar"></i> Update Cart</button>
                                </td>
                            </tr>
                        </tfoot>
                </table> 
                </form>               
            </div>
            <div class="col-12 col-sm-12 col-md-3 col-lg-4 cart__footer">
                <div class="solid-border">	
                  <div class="row border-bottom pb-2 pt-2">
                    <span class="col-12 col-sm-6 cart__subtotal-title"><strong>Grand Total</strong></span>
                    <span class="col-12 col-sm-6 cart__subtotal-title cart__subtotal text-right"><span class="money">$1001.00</span></span>
                  </div>
                  <p class="cart_tearm">

                  </p>
                  <input type="submit" name="checkout" id="cartCheckout" class="btn btn--small-wide checkout" value="Passer commande">
                </div>
            </div>
            <!--End Main Content-->
        </div>
    </div><!--End Body Container-->
    {% else %}
    <!--Page Title with Image-->
    <div class="page-title"><h1>Votre panier est vide</h1></div>
    <!--End Page Title with Image-->
    <div class="container">
        <div class="row">
            <!--Main Content-->
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                <div class="solid-border">	
                    <p class="text-center">---</p>
                    <div class="text-center">
                        <a href="{{ path('home') }}"><input type="submit" name="checkout" class="btn" value="Continuer les achats"></a>
                    </div>
                </div>
            </div>
            <!--End Main Content-->
        </div>  
    </div><!--End Body Container-->
    {% endif %}
</div>
{% endblock %}