{% extends "layout.html" %}

{% block content %}

<main>
    <section class="cart">
        <h2>Cart</h2>
        <div>
            <ul >
                <li class="order-summary-list-list-item">
                    <img src="/img/sunglasses.png"
                         class="order-summary-list-list-item-image"/>
                    <p class="order-summary-list-list-item-title">Sunglasses</p>
                    <p class="order-summary-list-list-item-price">€5.00</p>
                </li>
                <li class="order-summary-list-list-item">
                    <img src="/img/headphones.png"
                         class="order-summary-list-list-item-image"/>
                    <p class="order-summary-list-list-item-title">Headphones</p>
                    <p class="order-summary-list-list-item-price">€5.00</p>
                </li>
            </ul>
        </div>
        <div class="cart-footer"><span class="cart-footer-label">Total:</span><span class="cart-footer-amount">€10.00</span>
            <a href="{{ integrationType }}">
                <p class="button">Continue to checkout</p>
            </a>
    </section>
</main>

{% endblock %}