{% 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 class = "login_field">
                      {{ remove_form.item_id_remove.label }} {{ remove_form.item_id_remove(class = "input_field") }}
                    </p>
                    <p class = "login_field">
                        clear all? {{ remove_form.clear_all }} {{ remove_form.submit(class = "orange_button") }}
                    </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: £{{ '{:,.2f}'.format(total_price) }}</p>
    <p class = "total_price">Shipping price: £{{ shipping_price }}</p>
    <p class = "total_price">Final price: £{{ '{:,.2f}'.format(final_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_shopping_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
            <p class = "shopping_item_text">price: £{{ '{:,.2f}'.format(item.product_price) }}</p>
            <p class = "shopping_item_text">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_left_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_logo_right_div">
        <img class = "footer_logo_right" src = "{{ url_for('static', filename='images/footer_mtb.png') }}" alt="mtb image"/>
    </div>
</footer>

{% endblock %}