{% sw_extends'@Storefront/storefront/base.html.twig' %}
{% block base_main_inner %}
{% if page.product.extensions.twinsheetExtension.isConfigurableTwinsheet %}
{# VARIABLE SETUP #}
{% if isHMRMode %}
<input type="hidden" value="true" id="isHMRMode" />
{% else %}
<input type="hidden" value="false" id="isHMRMode" />
{% endif %}
{% set shapes = getShapes(context) %}
{% set measurements = getMeasurements(context) %}
{% set strengths = getStrengths(context) %}
{% set grammatures = getGrammatures(context) %}
{% set qualities = getQualities(context) %}
{% set pretreatments = getPretreatments(context) %}
{% set additives = getAdditives(context) %}
{% set colors = getColors(context) %}
{% set standardColors = getStandardColors(context) %}
{% set specialColors = getSpecialColors(context) %}
{% set printColors = getPrintColors(context) %}
{% set deliveryTimes = getDeliveryTimes(context) %}
{% set configuratorDeliveryTimes = getConfiguratorDeliveryTimes(context) %}
{% set getNeedsPunchingDimensions = getNeedsPunchingDimensions(context) %}
{% set locale = app.request.locale|split('-')[0] %}
{% set twinsheet = getTwinsheetForId(page.product.extensions.twinsheetExtension.twinsheetId, context) %}
{# VISUALIZATION #}
<div id="visualization-wrapper">
<div hidden id="buyButtonWrapper">
<button id="buyButton" aria-label="{{ "detail.addProduct"|trans|striptags }}">
{% sw_icon 'cart' style {'pack': 'default', 'size': 'md', 'color': 'light'} %}
<br/>
{{ "detail.addProduct"|trans|sw_sanitize }}
</button>
</div>
<div id="worldControlWrapper">
<div id="paletteButtonWrapper">
<button id="paletteButton">
{% sw_icon 'globe' style {'pack': 'default', 'size': 'md', 'color': 'light'} %}
<br/>
{{ "environment"|trans }}
</button>
<div class="referenceInfoBtn">
<button
type="button"
class="btn"
data-toggle="popover"
title="{{ 'explainerReferenceObjectTitle' | trans }}"
data-content="{{ 'explainerReferenceObject' | trans }}">
<svg style="width:1.2rem; height:auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(1.8000000000000007,1.8000000000000007), scale(0.85)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ededed" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.25 11C10.25 10.4477 10.6977 10 11.25 10H12.75C13.3023 10 13.75 10.4477 13.75 11V18C13.75 18.5523 13.3023 19 12.75 19H11.25C10.6977 19 10.25 18.5523 10.25 18V11ZM14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9C13.1046 9 14 8.10457 14 7Z" fill="#0D3B66"></path> </g>
</svg>
</button>
</div>
</div>
<input type="hidden" id="showPalette"/>
<div
id="optionNeededButton"
data-bs-toggle="modal"
data-toggle="modal"
data-bs-toggle="modal"
data-url="{{ path('frontend.cms.page', { id: config('core.basicInformation.contactPage') }) }}"
href="{{ path('frontend.cms.page', { id: config('core.basicInformation.contactPage') }) }}"
title="contact form">
{{ 'optionNeeded' | trans }}
</div>
</div>
<div id="visualizerOverlay">
<div id="priceSection">
<div id="pricewrapper">
<span id="price">-,--€</span>/{{ 'unit' | trans }}
</div>
<div id="totalPriceWrapper">
{{ 'sum' | trans }}: <span id="totalPrice">-,--€</span>
</div>
<div id="deliveryTimeWrapper">
<small>{{ 'deliveryTime' | trans }}: <span id="deliveryTime">{{ page.product.deliveryTime.translated.name }}</span></small>
</div>
</div>
<div id="quantityBox">
<label for="quantity">
<span hidden id="quantityPopoverText">{{ 'quantityPopover' | trans }}</span>
{{ 'quantity' | trans }}
<span id="quantityPopover" style="cursor: pointer">
{% sw_icon 'info' style {'pack': 'default', 'size': 'xs', 'color': 'light'} %}
</span>
</label>
<input
id="quantity"
type="number"
name="quantity"
class="form-control"
/>
<div id="minimumOrderQuantityIndicator"><span id="rawMaterialInKilogramms"></span></div>
</div>
{# CRSF for calculating price route #}
<input id="ts-csrf-token" type="hidden" name="hkp-csrf-token" value="{{ sw_csrf('frontend.gbm.getPriceForTs', {"mode": "token"}) }}"/>
</div>
<div data-hkp-visualizer-plugin id="hkp-visualizer"></div>
</div>
{# OPTIONS #}
<div id="ts-options-wrapper">
{# Scroll Left Button #}
<div id="optionsScrollLeft">
{% sw_icon 'arrow-head-left' style {'pack': 'default', 'size': 'md', 'color': 'dark'} %}
</div>
<!--SHAPE-->
<div id="shape-container" class="ts-options pt-4 row flex-row flex-nowrap">
{# Explainer #}
<div class="explainerOption">
{{ "explainerShape" | trans }}
</div>
{% for shape in shapes | sort((a, b) => a.identifier <=> b.identifier) %}
{% set measurementIds = [] %}
{% for m in shape.measurements.elements %}
{% set measurementIds = measurementIds|merge([m.id]) %}
{% endfor %}
<div
id="{{ shape.id }}"
type="number"
data-button-shape="{{ shape.identifier }}"
data-shape-name="{{ shape.name }}"
data-measurements="{{ measurementIds | json_encode()}}"
data-option-button
class="
d-flex justify-content-center flex-column
ts-option-btn
{% if twinsheet.shapeId == shape.id %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
>
<img
class=""
src="{{ asset("bundles/hkpplugin/assets/icon-pack/ts-options/#{shape.identifier}.svg", 'asset') }}"
alt="{{ shape.translated.name }} Symbol"
>
<div class="mt-2">
<p class="mb-0 text-center">{{ shape.translated.name }}</p>
</div>
{% if shape.translated.info %}
<div class="optionInfoBtn">
<button
type="button"
class="btn"
data-toggle="popover"
title="{{ shape.translated.name }}"
data-content="{{ shape.translated.info }}">
<svg style="width:1.2rem; height:auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-width="0" transform="translate(3.7200000000000006,3.7200000000000006), scale(0.69)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ededed" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.25 11C10.25 10.4477 10.6977 10 11.25 10H12.75C13.3023 10 13.75 10.4477 13.75 11V18C13.75 18.5523 13.3023 19 12.75 19H11.25C10.6977 19 10.25 18.5523 10.25 18V11ZM14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9C13.1046 9 14 8.10457 14 7Z" fill="#0D3B66"></path> </g>
</svg>
</button>
</div>
{% endif %}
</div>
{% endfor %}
</div>
<!--MEASUREMENTS-->
<div hidden id="measurements-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerMeasurements" | trans }}
</div>
{% for measurement in measurements | sort((a, b) => a.identifier <=> b.identifier) %}
<div
class="ts-measurement"
data-form-type="measurement"
id="{{ measurement.id }}"
{% if shapes.elements[twinsheet.shapeId].measurements.elements[measurement.id] is not defined %}
hidden
{% endif %}
>
<label for="measurement-{{ measurement.identifier }}" class="form-label"><strong>{{ measurement.name }} (mm)</strong></label>
<input
name="measurement-{{ measurement.identifier }}"
data-min="{{ measurement.min }}"
data-max="{{ measurement.max }}"
data-measurement-name="{{ measurement.name }}"
type="number"
class="form-control"
value="{{ twinsheet.measurements[measurement.identifier] }}"
data-measurement-identifier="{{ measurement.identifier }}"
/>
</div>
{% endfor %}
</div>
<!--STRENGTH-->
<div hidden id="strength-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerStrength" | trans }}
</div>
{% for strength in strengths | sort((a, b) => a.strength <=> b.strength) %}
<div
id="{{ strength.id }}"
data-button-strength="{{ strength.strength }}"
data-option-button
type="number"
class="
ts-option-btn
{% if twinsheet.strengthId == strength.id %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
>
{% if locale == 'de' %}
{{ strength.strength | number_format(1, ',', '.')}}mm
{% else %}
{{ strength.strength | number_format(1, '.', ',')}}mm
{% endif %}
</div>
{% endfor %}
</div>
<!--GRAMMATURE-->
<div hidden id="grammature-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerGrammature" | trans }}
</div>
{% for grammature in grammatures | sort((a, b) => a.grammature <=> b.grammature) %}
<div
id="{{ grammature.id }}"
data-button-grammature="{{ grammature.grammature }}"
data-option-button
type="number"
class="
ts-option-btn
{% if twinsheet.grammatureId == grammature.id %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
{% if strengths.elements[twinsheet.strengthId].grammatures.elements[grammature.id] is not defined %}
hidden
{% endif %}
>
<span>{{ grammature.grammature }}g/m<sup>2</sup></span>
</div>
{% endfor %}
</div>
<!--QUALITY-->
<div hidden id="quality-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerQuality" | trans }}
</div>
{% for quality in qualities %}
<div
id="{{ quality.id }}"
data-button-quality="{{ quality.identifier }}"
data-option-button
type="number"
class="
ts-option-btn
{% if twinsheet.qualityId == quality.id %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
>
{{ quality.name }}
{% if quality.translated.info %}
<div class="optionInfoBtn">
<button
type="button"
class="btn"
data-toggle="popover"
title="{{ quality.translated.name }}"
data-content="{{ quality.translated.info }}">
<svg style="width:1.2rem; height:auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-width="0" transform="translate(3.7200000000000006,3.7200000000000006), scale(0.69)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ededed" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.25 11C10.25 10.4477 10.6977 10 11.25 10H12.75C13.3023 10 13.75 10.4477 13.75 11V18C13.75 18.5523 13.3023 19 12.75 19H11.25C10.6977 19 10.25 18.5523 10.25 18V11ZM14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9C13.1046 9 14 8.10457 14 7Z" fill="#0D3B66"></path> </g>
</svg>
</button>
</div>
{% endif %}
</div>
{% endfor %}
</div>
<!--PRETREATMENTS-->
<div hidden id="pretreatments-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerPretreatments" | trans }}
</div>
{% for pretreatment in pretreatments %}
<div
id="{{ pretreatment.id }}"
data-button-pretreatment="{{ pretreatment.identifier }}"
data-pretreatment-identifier="{{ pretreatment.identifier }}"
data-option-button
type="number"
class="
ts-option-btn
{% if twinsheet.pretreatments.elements[pretreatment.id] is defined %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
>
{{ pretreatment.name }}
{% if pretreatment.translated.info %}
<div class="optionInfoBtn">
<button
type="button"
class="btn"
data-toggle="popover"
title="{{ pretreatment.translated.name }}"
data-content="{{ pretreatment.translated.info }}">
<svg style="width:1.2rem; height:auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-width="0" transform="translate(3.7200000000000006,3.7200000000000006), scale(0.69)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ededed" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.25 11C10.25 10.4477 10.6977 10 11.25 10H12.75C13.3023 10 13.75 10.4477 13.75 11V18C13.75 18.5523 13.3023 19 12.75 19H11.25C10.6977 19 10.25 18.5523 10.25 18V11ZM14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9C13.1046 9 14 8.10457 14 7Z" fill="#0D3B66"></path> </g>
</svg>
</button>
</div>
{% endif %}
</div>
{% endfor %}
</div>
<!--ADDITIVES-->
<div hidden id="additives-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerAdditives" | trans }}
</div>
{% for additive in additives | sort((a, b) => a.name <=> b.name) %}
<div
id="{{ additive.id }}"
{% if qualities.elements[twinsheet.qualityId].noAdditives %}
hidden
{% endif %}
data-button-additive="{{ additive.identifier }}"
data-option-button
type="number"
class="
ts-option-btn
{% if twinsheet.additives.elements[additive.id] is defined %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
>
{{ additive.name }}
{% if additive.translated.info %}
<div class="optionInfoBtn">
<button
type="button"
class="btn"
data-toggle="popover"
title="{{ additive.translated.name }}"
data-content="{{ additive.translated.info }}">
<svg style="width:1.2rem; height:auto" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-width="0" transform="translate(3.7200000000000006,3.7200000000000006), scale(0.69)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ededed" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM10.25 11C10.25 10.4477 10.6977 10 11.25 10H12.75C13.3023 10 13.75 10.4477 13.75 11V18C13.75 18.5523 13.3023 19 12.75 19H11.25C10.6977 19 10.25 18.5523 10.25 18V11ZM14 7C14 5.89543 13.1046 5 12 5C10.8954 5 10 5.89543 10 7C10 8.10457 10.8954 9 12 9C13.1046 9 14 8.10457 14 7Z" fill="#0D3B66"></path> </g>
</svg>
</button>
</div>
{% endif %}
</div>
{% endfor %}
<div
id="noAdditivesForQualityAvailable"
{% if not qualities.elements[twinsheet.qualityId].noAdditives %}
hidden
{% endif %}
>
{{ 'noAdditivesForQuality' | trans }}
</div>
</div>
<!--COLOR-->
<div hidden id="color-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerColors" | trans }}
</div>
<h4 id="standardColorsHeading">{{ 'standard_colors' | trans }}</h4>
{% for color in standardColors | sort((a, b) => a.number <=> b.number) %}
<div
id="{{ color.id }}"
data-color="{{ color.hex }}"
data-button-color="{{ color.id }}"
data-option-button
class="
ts-color-btn
{% if twinsheet.colorId == color.id %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
style="background-color: rgba(0,0,0,0); color: black"
{% if qualities.elements[twinsheet.qualityId].filterColors.elements | length > 0 && qualities.elements[twinsheet.qualityId].filterColors.elements[color.id] is not defined %}
hidden
{% endif %}
>
<div class="color-btn-colorfield" style="background-color: #{{ color.hex }};width: 100%;"></div>
<div class="color-btn-label">{{ color.colorSystem }} {{ color.number }} {{ color.name }}</div>
</div>
{% endfor %}
<h4
id="specialColorsHeading"
{% if qualities.elements[twinsheet.qualityId].filterColors.elements | length > 0 %}
hidden
{% endif %}
>{{ 'special_colors' | trans }}</h4>
<div id="ralNumberFilterWrapper"
{% if qualities.elements[twinsheet.qualityId].filterColors.elements | length > 0 %}
hidden
{% endif %}
>
<span id="ralNumberFilter">{{ 'ralFilter' | trans }}</span>
<div id="ralNumberInputWrapper">
<input id="ralFilter" type="number" class="form-control"/>
</div>
</div>
{% for color in specialColors | sort((a, b) => a.number <=> b.number) %}
<div
id="{{ color.id }}"
data-color="{{ color.hex }}"
data-button-color="{{ color.id }}"
{% if color.number %}
data-ral-number="{{ color.number }}"
{% endif %}
data-option-button
class="
ts-color-btn
{% if twinsheet.colorId == color.id %}
ts-option-selected
{% else %}
ts-option-not-selected
{% endif %}
"
style="background-color: rgba(0,0,0,0); color: black"
{% if qualities.elements[twinsheet.qualityId].filterColors.elements | length > 0 && qualities.elements[twinsheet.qualityId].filterColors.elements[color.id] is not defined %}
hidden
{% endif %}
>
<div class="color-btn-colorfield" style="background-color: #{{ color.hex }};width: 100%;"></div>
<div class="color-btn-label">{{ color.colorSystem }} {{ color.number }} {{ color.name }}</div>
</div>
{% endfor %}
</div>
<!--PRINT-->
<div hidden id="print-container" class="ts-options pt-4 row flex-row flex-nowrap flex-shrink-0">
{# Explainer #}
<div class="explainerOption">
{{ "explainerPrint" | trans }}
</div>
<h4 id="printTextHeading">{{ 'print_text' | trans }}</h4>
<div id="hkp-print-wrapper">
<input id="twinsheet-print-text" type="text" class="form-control" value="{{ twinsheet.printText }}"/>
</div>
<h4 id="printColorsHeading">{{ 'print_colors' | trans }}</h4>
{% for color in printColors %}
<div
id="{{ color.id }}"
data-printcolor="{{ color.hex }}"
data-button-printcolor="{{ color.id }}"
type="number"
class="
ts-color-btn
{% if twinsheet.printColorId == color.id %}
ts-color-selected
{% else %}
ts-color-not-selected
{% endif %}
"
style="background-color: rgba(0,0,0,0); color: black"
>
<div class="color-btn-colorfield" style="background-color: #{{ color.hex }};width: 100%;"></div>
<div class="color-btn-label">{{ color.colorSystem }} {{ color.number }} {{ color.name }}</div>
</div>
{% endfor %}
</div>
{# Scroll Right Button #}
<div id="optionsScrollRight">
{% sw_icon 'arrow-head-right' style {'pack': 'default', 'size': 'md', 'color': 'dark'} %}
</div>
</div>
{# OPTION CATEGORIES #}
{% set categories =
[
'shape',
'measurements',
'strength',
'grammature',
'quality',
'pretreatments',
'additives',
'color',
'print'
]
%}
<div id="ts-categories-wrapper">
{# Scroll Left Button #}
<div id="categoriesScrollLeft">
{% sw_icon 'arrow-head-left' style {'pack': 'default', 'size': 'md', 'color': 'light'} %}
</div>
<div id="ts-categories" class="row flex-row flex-nowrap pt-4">
{% for c in categories %}
<div
id="{{ c }}-button"
data-switch-category={{ c }}
>
<div class="d-flex justify-content-center flex-column ts-category ts-category-not-selected">
<img
class="category-icon-inverted"
src="{{ asset("bundles/hkpplugin/assets/icon-pack/ts-categories/#{c}.svg", 'asset') }}"
alt="{{ c | trans }} Symbol"
>
<div class="card-body mt-2">
<p class="text-center">{{ c | trans }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
{# Scroll Right Button #}
<div id="categoriesScrollRight">
{% sw_icon 'arrow-head-right' style {'pack': 'default', 'size': 'md', 'color': 'light'} %}
</div>
</div>
<div data-twinsheet-form data-twinsheet="{{ {
'twinsheet': twinsheet,
'shapes': shapes,
'measurements': measurements,
'strengths': strengths,
'grammatures': grammatures,
'qualities': qualities,
'pretreatments': pretreatments,
'additives': additives,
'standardColors': standardColors,
'specialColors': specialColors,
'printColors': printColor,
'deliveryTimes': deliveryTimes,
'configuratorDeliveryTimes': configuratorDeliveryTimes,
'needsPunchingDimensions': getNeedsPunchingDimensions,
} | json_encode }}"></div>
<!-- Print-Modal (Corona pretreatment must be selected) -->
<div class="modal fade" id="coronaMustBeSelectedModal" tabindex="-1" role="dialog" aria-labelledby="coronaMustBeSelectedModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="coronaModalLongTitle">{{ 'coronaMustBeSelectedTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="coronaMustBeSelectedWarning" class="modal-body">
{{ 'coronaMustBeSelectedBody' | trans }}
</div>
<div class="modal-footer">
<button id="confirmAddingCoronaPretreatmentButton" type="button" data-dismiss="modal" class="btn btn-primary">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<!-- Measurement-Modal (out of bounds) -->
<div class="modal fade" id="measurementOutOfBoundsModal" tabindex="-1" role="dialog" aria-labelledby="measurementOutOfBoundsModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="grammatureModalLongTitle">{{ 'measurementOutOfBoundsTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="measurementOutOfBoundsWarning" class="modal-body">
<strong id="selectedMeasurement"></strong> {{ 'isNotAvailableWithShape' | trans }}:
<strong id="selectedShape"></strong><br/><br/>
Minimum: <span id="measurementMinValue"></span><br/>
Maximum: <span id="measurementMaxValue"></span>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<!-- Measurement-Modal (Inner/Outer Circle minimum difference) -->
<div class="modal fade" id="measurementCircularErrorModal" tabindex="-1" role="dialog" aria-labelledby="measurementCircularErrorModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ 'measurementCircularErrorTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ 'minimumDifferenceInnerToOuterDiameter' | trans }}: 50mm
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<!-- Strength-Grammature Modal -->
<div class="modal fade" id="strengthCompatibilityModal" tabindex="-1" role="dialog" aria-labelledby="strengthCompatibilityModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="grammatureModalLongTitle">{{ 'grammatureNotAvailableTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="grammatureNotAvailableWarning" class="modal-body">
<strong id="selectedStrength"></strong><strong>mm</strong> {{ 'isNotAvailableWithGrammature' | trans }}:
<strong id="selectedGrammature"></strong><strong>g/m<sup>2</sup></strong><br/><br/>
{{ 'notAvailableGrammatureDeselected' | trans }}. {{ 'askProceed' | trans }}?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'cancel' | trans }}</button>
<button type="button" class="btn btn-primary" id="confirmDiscardingUnavailableGrammatureButton">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<!-- Quality-Options Modal -->
<div class="modal fade" id="qualityCompatibilityModal" tabindex="-1" role="dialog" aria-labelledby="qualityModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="qualityModalLongTitle">{{ 'colorNotAvailableTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div hidden id="additiveNotAvailableForQualityWarning" class="modal-body">
<strong id="selectedQualityForAdditive"></strong> {{ 'isNotAvailableWithAdditives' | trans }}:
{{ 'notAvailableAdditiveDeselected' | trans }}.
</div>
<div id="colorNotAvailableWarning" class="modal-body">
<strong id="selectedQuality"></strong> {{ 'isNotAvailableWithColor' | trans }}:
<strong id="selectedColor"></strong><br/><br/>
{{ 'notAvailableColorDeselected' | trans }}. {{ 'askProceed' | trans }}?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'cancel' | trans }}</button>
<button type="button" class="btn btn-primary" id="confirmDiscardingUnavailableQualityOptions">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<!-- Pretreatment Modal -->
<div class="modal fade" id="pretreatmentCompatibilityModal" tabindex="-1" role="dialog" aria-labelledby="pretreatmentModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pretreatmentModalLongTitle">{{ 'pretreatmentNotAvailableTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="pretreatmentNotAvailableWarning" class="modal-body">
<span hidden id="conflictingPretreatmentWrapper">
<strong id="conflictingPretreatment"></strong> {{ 'notCompatibleWith' | trans }}:
<strong id="conflictingPretreatmentReferences"></strong><br/><br/>
{{ 'notCompatiblePretreatmentDeselected' | trans }}. {{ 'askProceed' | trans }}?
</span>
<span hidden id="removePrintTextWarning">{{ 'removePrintTextWarning' | trans }}</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'cancel' | trans }}</button>
<button type="button" class="btn btn-primary" id="confirmDiscardingIncompatiblePretreatmentsButton">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<!-- Additive Modal -->
<div class="modal fade" id="additiveCompatibilityModal" tabindex="-1" role="dialog" aria-labelledby="additiveModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="additiveModalLongTitle">{{ 'additiveNotAvailableTitle' | trans }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="additiveNotAvailableWarning" class="modal-body">
<strong id="conflictingAdditive"></strong> {{ 'notCompatibleWith' | trans }}:
<strong id="conflictingAdditiveReferences"></strong><br/><br/>
{{ 'notCompatibleAdditiveDeselected' | trans }}. {{ 'askProceed' | trans }}?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'cancel' | trans }}</button>
<button type="button" class="btn btn-primary" id="confirmDiscardingIncompatibleAdditivesButton">{{ 'accept' | trans }}</button>
</div>
</div>
</div>
</div>
<div id="buyWidgetForm">
{% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}
</div>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}