WesternFriend/WF-website

{% extends "base.html" %}
{% load static %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block title %}
    Western Friend cart
{% endblock %}

{% block content %}
    <h1>Your shopping cart</h1>

    <table class="table">
        <thead>
            <tr>
                <th scope="col">Image</th>
                <th scope="col">Product</th>
                <th scope="col">Quantity</th>
                <th scope="col">Remove</th>
                <th scope="col">Unit price</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            {% for item in cart %}
                {% with product=item.product %}
                    <tr>
                        <td class="align-middle">
                            <a href="{% pageurl product %}">
                                {% image product.image max-100x100 %}
                            </a>
                        </td>
                        <td class="align-middle">
                            <a href="{% pageurl product %}">
                                {{ product.title }}
                            </a>
                        </td>
                        <td>
                            <form
                                action="{% url "cart:add" product.id %}"
                                method="post"
                                class="form-inline"
                            >

                                {% csrf_token %}

                                <div class="input-group">
                                    <input
                                        id="update-button-{{ product.id }}"
                                        type="number"
                                        name="quantity"
                                        min="1"
                                        required=""
                                        id="quantity"
                                        aria-label="quantity"
                                        class="form-control"
                                        value="{{ item.quantity }}"
                                        style="max-width: 10em"
                                    >


                                    <input
                                        type="submit"
                                        value="Update"
                                        aria-label="update quantity"
                                        aria-describedby="update-button-{{ product.id }}"
                                        class="btn btn-outline-primary btn-sm">

                                </div>
                            </form>
                        </td>
                        <td class="align-middle">
                            <a
                                href="{% url "cart:remove" product.id %}"
                                class="btn btn-outline-danger"
                            >
                                <i class="bi bi-trash"></i>
                            </a>
                        </td>
                        <td class="num align-middle">
                            ${{ item.price }}
                        </td>
                        <td class="num align-middle text-right">
                            ${{ item.total_price }}
                        </td>
                    </tr>
                {% endwith %}
            {% endfor %}
            <tr>
                <td colspan="5" class="text-right font-italic">Subtotal</td>
                <td class="num text-right">
                    ${{ cart.get_subtotal_cost }}
                </td>
            </tr>
            <tr>
                <td colspan="5" class="text-right font-italic">Shipping</td>
                <td class="num text-right">
                    ${{ cart.get_shipping_cost }}
                </td>
            </tr>
            <tr class="font-weight-bold">
                <td colspan="5" class="text-right">Total</td>
                <td class="num text-right">
                    ${{ cart.get_total_cost }}
                </td>
            </tr>
        </tbody>
    </table>

    <div class="text-right">
        <div class="btn-group" role="group" aria-label="Cart navigation">
            {% if store_index_page %}
                <a
                    href="{% pageurl store_index_page %}"
                    class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i>
                    Back to bookstore
                </a>
            {% endif %}
            <a
                href="{% url "orders:order_create" %}"
                class="btn btn-outline-primary">
                Checkout
                <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
{% endblock %}