<div class="container mt-3">
    <div id="alert"></div>
</div>
<div class="checkout-products">

{% for product in products %}

<div class="checkout-product-card">

   <div class="checkout-product-left">

    <h6>{{ product.name }}</h6>

    <small>{{ text_model }} : {{ product.model }}</small>

    <ul class="list-unstyled mt-2 mb-0">

        {% for option in product.option %}
            <li>
                <small>{{ option.name }} : {{ option.value }}</small>
            </li>
        {% endfor %}

        {% if product.subscription %}
            <li>
                <small>{{ text_subscription }} : {{ product.subscription }}</small>
            </li>
        {% endif %}

        {% if product.reward %}
            <li>
                <small>{{ text_points }} : {{ product.reward }}</small>
            </li>
        {% endif %}

    </ul>

</div>

    <div class="checkout-product-right">

        <span class="qty">

            × {{ product.quantity }}

        </span>

        <strong>{{ product.total }}</strong>

    </div>

</div>

{% endfor %}

</div>

{% for total in totals %}

<div class="checkout-total-row">

    <span>{{ total.title }}</span>

    <strong>{{ total.text }}</strong>

</div>

{% endfor %}

<div id="checkout-payment">

{% if payment %}

{{ payment }}

{% else %}

<div class="text-end">

<button
class="btn btn-success btn-lg"
disabled>

{{ button_confirm }}

</button>

</div>

{% endif %}

</div>