{% extends "layout.html" %}

{% block title %}Login Example{% endblock %}

{% block page_content %}

<div id="content-wrap">
    <h1 class = "cart_welcome">Hello {{ current_user.username }} here is your current cart:</h1>

    {% if cart_size > 0: %}
        <div class = "cart_side">
            <div class = "remove_form">
                <form method="POST">
                    {{ remove_form.csrf_token }}
                    <p>
                      {{ remove_form.item_id_remove.label }} {{ remove_form.item_id_remove(class = "field_order_by") }}
                    </p>
                    <p>
                        clear all? {{ remove_form.clear_all }} {{ remove_form.submit(class = "field_order_by") }}
                    </p>
                </form>
            </div>

            <div class = "checkout_button_outer">
                <a href="{{ url_for('checkout') }}">
                    <div class = "checkout_button">
                        <p class = "checkout_button_text">Checkout</p>
                    </div>
                </a>
            </div>
        </div>

        <p class = "item_amount_cart">You have {{ cart_size }} items in your cart</p>
    {% endif %}


    {% if cart_size <= 0: %}
        <h1 class = 'empty_cart'>Your cart is empty</h1>
        <div class = "empty_cart_image">
            <img class = "cart_empty_image" src = "{{ url_for('static', filename='images/mountains.png') }}" alt="mountains" style="width:100%;">
        </div>
    {% endif %}

    {% if cart_size > 0: %}
        <p class = "total_price">Total price: {{ total_price }}</p>
    {% endif %}

    {% for item in cart_list %}
        <div class = "cart_box" >
            <a href="/item?id={{item.product_id}}">
                <img class = "item_cart_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="background image"/></a>
            <p><a class = "item_cart_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
            <p>price: £{{ item.product_price }}</p>
            <p>item id: {{ item.product_id }}</p>
        </div>

    {% endfor %}

</div>

<!--repeated footer in page as dont want every page to have it-->
<footer id="footer">
    <div class = "footer_logo_div">
        <img class = "footer_logo_left" src = "{{ url_for('static', filename='images/dark_logo.png') }}" alt="logo image"/>
    </div>
    <div class = "footer_contact">
        <p>Contact us:</p>
        <p>e-mail: mpdrury15@gmail.com</p>
        <p>telephone: 07874810762</p>
    </div>
    <div class = "footer_bike">
        <img style = "height: 120px" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
    </div>
</footer>

{% endblock %}