{% extends 'base.html.twig' %}{% block page_title %}{{ 'storefront.title'|resolve|striptags }} | {{ product.name }}{% endblock %}{% block head_custom_stylesheets %}{{ encore_entry_link_tags('product-card') }}{{ encore_entry_link_tags('products') }}{% endblock head_custom_stylesheets %}{% block content %}{% set productConfig = product.config|json_decode %}<div class="container-3xl my-5"><div class="row"><div class="col-12 d-lg-none"><h1 class="ornament mb-4">{{ product.name }}</h1></div><div class="col-12 col-lg-8 col-xl-6 order-2 order-lg-1"><h1 class="ornament mb-4 d-none d-lg-block">{{ product.name }}</h1><p>{{ product.description|raw }}</p><ul id="product-config" class="my-4">{% if productConfig.kim_addresses_included %}<li>{{ productConfig.kim_addresses.quantity }}x KIM Adressen</li>{% endif %}{% if productConfig.hardware_included %}{% for hardware in productConfig.hardware %}{% if hardware.quantity > 0 %}<li>{{ hardware.quantity }}x {{ hardware.hardware|resolve }}</li>{% endif %}{% endfor %}{% endif %}</ul><form name="product-form"><div class="row">{% if productConfig.kim_addresses_included %}{% set quantity = productConfig.kim_addresses.quantity %}<div class="col-12"><div class="bg-lightgrey p-3 p-xl-5"><h3>KIM Mail</h3><p>Reserviere deine KIM-Adresse{{ (quantity > 1) ? 'n' : '' }}.</p><div id="kimAddresses">{% for i in range(1, quantity) %}<div id="kim_address_result_{{ loop.index0 }}" class="d-none w-100 mb-3"></div><div class="row"><div class="input-group mb-4 mb-md-3"><inputid="kim_address_{{ loop.index0 }}"name="kim_address[{{ loop.index0 }}]"type="text"class="col-12 col-md-5 form-control border-0"placeholder="Kim Muster"aria-label="Kim Adresse"aria-describedby="kim_address_{{ loop.index0 }}"data-domain="{{ productConfig.kim_addresses.domain }}"data-type="kim"data-included="true"data-reserved="false"><span class="col-12 col-md-5 input-group-text border-0 bg-accent-grey" id="kim_address_{{ loop.index0 }}">{{ productConfig.kim_addresses.domain }}</span><buttonclass="col-12 col-md-2 button accent"type="button"data-type="check"data-target="kim_address_{{ loop.index0 }}"data-result="kim_address_result_{{ loop.index0 }}">Prüfen</button><buttonclass="col-12 col-md-2 button accent d-none"type="button"data-type="reserve"data-target="kim_address_{{ loop.index0 }}"data-result="kim_address_result_{{ loop.index0 }}"disabled="disabled">Reservieren</button></div></div>{% endfor %}</div>{% if has_kim_prices(product.id) %}<template id="kimAddressTemplate"><div id="kim_address_result_" class="d-none w-100 mb-3"></div><div class="row"><div class="input-group mb-3 mb-md-3"><button class="col-6 col-md-1 order-3 order-md-1 d-flex justify-content-center align-items-center d-md-block btn btn-outline-secondary" type="button" data-type="remove"><i class="fas fa-trash"></i><span class="d-block ms-2 ms-md-0 d-md-none">löschen</span></button><inputid="kim_address_"name="kim_address[]"type="text"class="col-12 col-md-5 order-1 order-md-2 form-control border-0"placeholder="Kim Muster"aria-label="Kim Adresse"data-domain="{{ productConfig.kim_addresses.domain }}"data-type="kim"data-included="false"data-price="{{ productConfig.kim_addresses.price }}"data-reserved="false"><span class="col-12 col-md-5 order-2 order-md-3 input-group-text bg-accent-grey" id="kim_address_">{{ productConfig.kim_addresses.domain }}</span><buttonclass="col-6 col-md-2 order-4 button accent button-border-right d-block"type="button"data-type="check">Prüfen</button><buttonclass="col-12 col-md-2 order-4 button accent d-none"type="button"data-type="reserve"disabled="disabled">Reservieren</button></div></div></template><button id="addAdditionalKimAddress" class="button outlined darkblue w-100" type="button"><i class="fas fa-plus me-2"></i> weitere hinzufügen</button>{% endif %}</div></div>{% endif %}</div>{% if has_hardware_prices(product.id) %}<div class="product-addons mt-5"><div class="row"><div class="col-12"><h1 class="ornament-with-child">{{ 'product.details.addon.headline'|resolve }}</h1><p>{{ 'product.details.addon.subline'|resolve }}</p></div></div><div data-match-height-group="product-addons-group" class="row g-3 match-height-product-addon">{% if productConfig.hardware_included %}{% for hardware in productConfig.hardware %}{% if hardware.has_own_price %}<div class="col-12 col-sm-6 col-xl-4"><divclass="addon d-flex flex-column justify-content-between bg-accent p-4"{{ stimulus_controller('product') }}data-product-max-value="99"data-product-min-value="0"><div class="card-body p-0"><h5 class="card-title">{{ hardware.hardware|resolve }}</h5>{% if hardware.price > 0 %}<p>{{ hardware.price }} €</p>{% endif %}<img class="d-block mx-auto pb-5" width="100" src="{{ asset('build/images/icons/icon_tiproduct.svg') }}" alt=""></div><div class="card-footer p-0"><div class="input-group"><buttontype="button"class="btn btn-dark btn-number"{{ stimulus_action('product', 'decreaseValue') }}><i class="fas fa-minus"></i></button><inputtype="number"name="hardware[{{ hardware.hardware }}]"class="form-control fw-bold"data-type="addon"data-item-number="{{ hardware.hardware }}"data-price="{{ hardware.price }}"placeholder="Anzahl"aria-label="Anzahl"aria-describedby="hardware_{{ hardware.hardware }}"value="0"min="0"{{ stimulus_target('product', 'quantity') }}><buttontype="button"class="btn btn-dark btn-number"{{ stimulus_action('product', 'increaseValue') }}><i class="fas fa-plus"></i></button></div></div></div></div>{% endif %}{% endfor %}{% endif %}</div></div>{% endif %}<div class="row mb-5 mt-2"><div class="col-12 text-center"><hr><h1>{{ product.name }}</h1>{% if (product.price > 0) %}<h1>{{ product.price|format_currency('EUR', locale='de') }} *</h1>{% endif %}{% if (product.recurringPrice) %}<h2>{{ product.recurringPrice|format_currency('EUR', locale='de') }} / mtl.</h2>{% endif %}<p>{{ 'product.details.page.button.star'|resolve }}</p></div><div class="col-12"><div class="mx-5"><button{{ stimulus_controller('shopping-cart') }}{{ stimulus_action('shopping-cart', 'addProductToCart') }}data-shopping-cart-product-id-value="{{ product.id }}"class="button accent w-100">{{ 'product.details.page.button.buy'|resolve }}</button></div><hr></div></div></form></div><div class="col-12 col-md-6 col-lg-4 col-xl-6 order-1 order-lg-1 mb-5 mb-lg-0"><div class="product-slider"><div style="--swiper-navigation-color: var(--ti-accent); --swiper-pagination-color: var(--ti-accent)" class="swiper product-slider-main-view"><div class="swiper-wrapper">{% for image in product.images %}<div class="swiper-slide"><img src="/images/{{ image.image }}"></div>{% endfor %}</div>{% if (product.images|length > 1) %}<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>{% endif %}</div>{% if (product.images|length > 1) %}<div thumbsSlider="" class="swiper product-slider-thumbnails-view"><div class="swiper-wrapper">{% for image in product.images %}<div class="swiper-slide"><img src="/images/{{ image.image }}"></div>{% endfor %}</div></div>{% endif %}</div></div></div></div>{% endblock %}{% block body_javascript %}{{ encore_entry_script_tags('product') }}{% endblock body_javascript %}