{% 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">
<input
id="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>
<button
class="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>
<button
class="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>
<input
id="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>
<button
class="col-6 col-md-2 order-4 button accent button-border-right d-block"
type="button"
data-type="check"
>
Prüfen
</button>
<button
class="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">
<div
class="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">
<button
type="button"
class="btn btn-dark btn-number"
{{ stimulus_action('product', 'decreaseValue') }}
>
<i class="fas fa-minus"></i>
</button>
<input
type="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') }}
>
<button
type="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 %}