{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}

{% block utilities_offcanvas_content %}
    {% block zen_page_product_detail_custom_field_global_container %}
        <div class="product-detail-custom-field1 tab-pane-container">
            {% set customTab = {
                'translated': {
                    title: "zentheme.atmos.content.customTabTitle"|trans({"%placeholder%": config('zenitPlatformAtmos.config.customTabTitle')}),
                    text: "zentheme.atmos.content.customTabText"|trans({"%placeholder%": config('zenitPlatformAtmos.config.customTabText')})
                }
            } %}

            {% block zen_page_product_detail_custom_field_global_content %}
                {% if page.product.translated.customFields.custom_ingredients_content|length > 0 %}
                <div>
                    <h3>{{ "customFields.custom_ingredients_content"|trans }}:</h3>
                    {{ page.product.translated.customFields.custom_ingredients_content|raw }}
                    
                    {% block page_product_detail_description_content_properties %}
                    <div class="mt-3">
                        {% if page.product.sortedProperties|length > 0 %}
                            {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %}
                        {% endif %}
                    </div>
                    {% endblock %}
                </div>
                {% endif %}
               {% if page.product.translated.customFields.custom_nutrition_energy_kcal|length > 0 %}
                    <h3>{{ "customFields.custom_nutrition"|trans }} pro 100&thinsp;{% if (page.product.unit.name == "kg") or (page.product.unit.name == "g") %}g{% elseif page.product.unit.name == "Liter" %}ml{% endif %}:</h3>
                    <table class="table table-striped product-detail-properties-table">
                        <tbody>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_energy_kcal"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_energy_kcal|raw }}&thinsp;kcal / {{ page.product.translated.customFields.custom_nutrition_energy_kj|raw }}&thinsp;kJ
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_fat"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_fat|raw|number_format(1, ',', '.') }}&thinsp;g
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_fattyacids"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_fattyacids|raw|number_format(1, ',', '.') }}&thinsp;g
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_carbohydrates"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_carbohydrates|raw|number_format(1, ',', '.') }}&thinsp;g
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_sugar"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_sugar|raw|number_format(1, ',', '.') }}&thinsp;g
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_protein"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_protein|raw|number_format(1, ',', '.') }}&thinsp;g
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_salt"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_salt|raw|number_format(2, ',', '.') }}&thinsp;g
                                </td>
                            </tr>
                            <tr class="properties-row">
                                <th class="properties-label">
                                    {{ "customFields.custom_nutrition_be"|trans }}
                                </th>
                                <td class="properties-value">
                                    {{ page.product.translated.customFields.custom_nutrition_be|raw|number_format(1, ',', '.') }}&thinsp;BE
                                </td>
                            </tr>
                        </tbody>
                    </table>
                {% endif %}
            {% endblock %}

        </div>
    {% endblock %}
{% endblock %}