{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}
{% block utilities_offcanvas_content %}
{% block component_product_description_container %}
<div class="product-detail-description tab-pane-container px-6">
{% block component_product_description_title %}
<div class="product-detail-description-title font-accent font-bold">
{# TODO make title dynamic #}
Menswear sizes
</div>
{% endblock %}
{% block component_product_description_content %}
<div class="product-detail-description-text mt-8"
itemprop="description">
{# TODO size guides #}
{% if page.product.manufacturer.extensions.listingPageExtension.sizeDescription %}
{{ page.product.manufacturer.extensions.listingPageExtension.sizeDescription | raw }}
{% else %}
<h3>Kleding</h3>
<table class="sw-text-editor-table">
<tbody class="sw-text-editor-table__body">
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
Maat
<div class="sw-text-editor-table__col-selector" contenteditable="false"
style="height: 371px;"></div>
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
Confectiemaat
<div class="sw-text-editor-table__col-selector" contenteditable="false"
style="height: 371px;"></div>
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
Borstomvang
<div class="sw-text-editor-table__col-selector" contenteditable="false"
style="height: 371px;"></div>
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
Taille in CM
<div class="sw-text-editor-table__col-selector" contenteditable="false"
style="height: 371px;"></div>
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
XS
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
44
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
86-89
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
76
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">S
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
46
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
90-93
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
80
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">M
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
48
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
94-97
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
84
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
M/L
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
50
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
98-101
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
88
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">L
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
52
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
102-106
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
92
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
XL
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
54
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
107-109
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
98
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
XXL
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
56
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
110-113
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
104
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
XXXL
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
58
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
114-117
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
110
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
4XL
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
60
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
118-121
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
116
</td>
</tr>
</tbody>
</table>
<h3 style="margin-top: 40px;">Schoenen</h3>
<table class="sw-text-editor-table">
<tbody class="sw-text-editor-table__body">
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
Maat
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">US
(Men)
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">US
(Women)
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
UK
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
36
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">-
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">5
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
3.5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
37
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">-
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">6
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
4.5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
38
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">6
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
6.5
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
39
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">7
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
7.5
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">6
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
40
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
7.5
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">8
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
6.5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
41
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
8.5
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">9
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
7.5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
42
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">9
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
10
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">8
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
43
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
9.5
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
11
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">9
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
44
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
10
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">-
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
9.5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
45
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
11
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">-
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
10.5
</td>
</tr>
<tr class="sw-text-editor-table__row">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
46
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
12
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">-
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
11
</td>
</tr>
<tr style="padding-bottom: 20px;">
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
47
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
13
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">-
</td>
<td class="sw-text-editor-table__col" style="border: 1px solid black; padding: 5px;">
12
</td>
</tr>
</tbody>
</table>
{% endif %}
{% if page.product.manufacturer.extensions.listingPageExtension.sizeMedia %}
<div class="size-guide-image mt-6">
{% sw_thumbnails 'gallery-slider-image-thumbnails' with {
'class': 'size-guide-image',
'alt': (page.product.manufacturer.extensions.listingPageExtension.sizeMedia.translated.alt ?: ''),
'title': (page.product.manufacturer.extensions.listingPageExtension.sizeMedia.translated.title ?: ''),
media: page.product.manufacturer.extensions.listingPageExtension.sizeMedia
} %}
</div>
{% endif %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endblock %}