<div class="total">
    {% if pricing.type == 'free' %}
        {% if product.allow_quantity_select %}
            <h4>{{ 'Quantity'|trans }}:</h4>
            <input type="text" name="quantity" value="1" class="form-control">
            <hr>
        {% endif %}
        
        <h2><strong>{{ 'Total price'|trans }}:</strong><br>{{ 0|money_convert }}</h2>
    {% endif %}

    {% if pricing.type == 'once'  %}
        {% if product.allow_quantity_select %}
            <h4>{{ 'Quantity'|trans }}:</h4>
            <input type="text" name="quantity" value="1" class="form-control">
            <hr>
        {% endif %}

        <h2><strong>{{ 'Total price'|trans }}:</strong><br> {{ (pricing.once.price + pricing.once.setup)|money_convert }}</h2>
    {% endif %}

    {% if pricing.type == 'recurrent' %}
        {% if product.allow_quantity_select %}
            <h4>{{ 'Quantity:'|trans }}:</h4>
            <input type="text" name="quantity" value="1" class="form-control">
            <hr>
        {% endif %}
            
        <select name="period" id="period-selector" class="form-select">
            {% for code,prices in pricing.recurrent %}
                {% if prices.enabled %}
                    <option value="{{ code }}"{% if request.period == code %} selected="selected"{% endif %}>{{ (prices.price + prices.setup)|money_convert }} {{ periods[code] }}</option>
                {% endif %}
            {% endfor %}
        </select>
        <hr>

        {% for code,prices in pricing.recurrent %}
            {% if prices.enabled and prices.setup > 0 %}
                <div class="period {{ code }}" style="{% if not loop.first %}display: none;{% endif %}">
                    <table class="table">
                        <tr>
                            <td>{{ 'Price'|trans }}</td>
                            <td>{{ prices.price | money_convert }}</td>
                        </tr>
                        <tr>
                            <td>{{ 'Setup Price'|trans }}</td>
                            <td>{{ prices.setup | money_convert }}</td>
                        </tr>
                    </table>
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<div class="d-grid">
    {% if product.addons|length > 0 %}
        <button class="btn btn-success btn-lg" type="submit" id="order-button">{{ 'Continue'|trans }}</button>
    {% else %}
        <button class="btn btn-success btn-lg" type="submit" id="order-button">{{ 'Order now'|trans }}</button>
    {% endif %}
</div>
