{% if not product %}
    {% set product = request.product ? guest.product_get({"id":request.product}) : null %}
{% endif %}
<div class="accordion-item">
    <h2 class="accordion-header">
        <button class="accordion-button {% if not product %}collapsed{%endif%}" type="button" data-bs-toggle="collapse" data-bs-target="#order" aria-expanded="true" aria-controls="order">
            <svg class="svg-icon me-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" /></svg>
            {{ 'Product Configuration'|trans }}
        </button>
    </h2>
    {% if product %}
    <div id="order" class="accordion-collapse collapse {% if product %}show{%endif%}" data-bs-parent="#orderManager">
        <div class="accordion-body">
            <div class="accordion-inner">
                <form method="post" style="background:none;" class="api-form form-{{ product.form_id ? guest.formbuilder_get( {"id":product.form_id}).style.type : 0 }}"
                    action="{{ 'api/guest/cart/add_item'|link }}" data-api-msg="{{ 'Product was added to shopping cart'|trans }}"
                    data-api-redirect="{{ 'order'|link({ 'checkout' : 1 }) }}" + "{% if request.show_custom_form_values %}&show_custom_form_values=1{% endif %}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    {% set product_details %}
                        <div class="well">
                            <h3>{{ product.title }}</h3>
                            {% if product.description %}
                                {{ product.description | markdown }}
                            {% endif %}

                            <hr>

                            <h5 class="mt-4 mb-1"><strong>{{ 'Billing'|trans }}</strong></h5>

                            <div class="row">
                                <div class="col-12 col-md-4 col-xl-3">
                                    {% if product.pricing.type == 'recurrent' %}
                                    <span>{{ 'Billing cycle'|trans }}</span>
                                    {% else %}
                                    <span>{{ 'One-time payment'|trans }}</span>
                                    {% endif %}
                                </div>
                                <div class="col">
                                    {% if product.pricing.type == 'recurrent' %}
                                    {% set periods = guest.system_periods %}
                                    <select class="form-select" name="period" id="period-selector">
                                        {% for code,prices in product.pricing.recurrent %}
                                            {% if prices.enabled %}
                                                <option value="{{code}}" data-bb-price="{{ prices.price | money_convert }}" name="period">{{ prices.price | money_convert }} ({{ periods[code] }})</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                    {% elseif product.pricing.type == 'free' %}
                                    <span class="badge bg-success">{{ 0 | money_convert }}</span>
                                    {% else %}
                                    <span class="badge bg-success">{{ product.pricing.once.price | money_convert }}</span>
                                    {% endif %}
                                </div>
                            </div>
                            {# TODO: This does not seem to be implemented on the back-end
                            {% if product.allow_quantity_select %}
                            <div class="row mt-3">
                                <div class="col-12 col-md-4 col-xl-3">
                                    <span>{{ 'Quantity'|trans }}</span>
                                </div>
                                <div class="col">
                                    <input type="number" name="quantity" value="1" min="1" class="form-control w-50" style="max-width: 120px; text-align: center;">
                                </div>
                            </div>
                            {% endif %}
                            #}
                        </div>
                    {% endset %}

                    {% set tpl = "mod_service"~product.type~"_order_form.html.twig" %}
                    {% if guest.system_template_exists({"file":tpl}) %}
                        {{ include(tpl, product) }}
                    {% elseif product.form_id and guest.extension_is_on({"mod":"formbuilder"}) %}
                        {{ product_details }}
                        {% set form = guest.formbuilder_get({"id":product.form_id}) %}
                        {{ include('mod_formbuilder_build.html.twig', product) }}
                    {% else %}
                        {{ product_details }}
                    {% endif %}

                    {{ include('mod_orderbutton_addons.html.twig', product) }}

                    <input type="hidden" name="multiple" value="1" />
                    <input type="hidden" name="id" value="{{ product.id }}" />
                    <div class="mt-2 mb-0">
                        <button type="submit" class="btn btn-primary" id="config-next">{{ 'Next'|trans }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
</div>
