chore: refactor and cleanup template

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -30,6 +30,7 @@
                         <div class="lg:pl-4">
                             <div class="hidden lg:block">
                                 <f:render section="SidebarButtons" arguments="{_all}"/>
+                                <f:variable name="showGallery" value="1"/>
                                 <f:render section="Sidebar" arguments="{_all}"/>
                             </div>
                         </div>
@@ -37,42 +38,12 @@
                     <div id="main" class="w-full lg:w-2/3">
                         <div class="lg:pr-4 flex flex-col space-y-8">
                             <div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white text-sm md:text-base">
-                                <button type="button"
+                                <f:render section="TabButton" arguments="{tab: 'dates', label: 'Termine/Preise', wide: 1}"/>
-                                        data-action="tabs#select"
+                                <f:render section="TabButton" arguments="{tab: 'hotel', label: 'Unterkunft', wide: 0}"/>
-                                        data-tabs-target="button"
+                                <f:render section="TabButton" arguments="{tab: 'region', label: 'Gebiet', wide: 0}"/>
-                                        data-tab="dates"
+                                <f:render section="TabButton" arguments="{tab: 'city', label: 'Ort', wide: 0}"/>
-                                        class="col-span-2 py-2 uppercase bg-button bg-button--dark">
-                                    Termine/Preise
-                                </button>
-                                <button type="button"
-                                        data-action="tabs#select"
-                                        data-tabs-target="button"
-                                        data-tab="hotel"
-                                        class="py-2 uppercase bg-button bg-button--dark">
-                                    Unterkunft
-                                </button>
-                                <button type="button"
-                                        data-action="tabs#select"
-                                        data-tabs-target="button"
-                                        data-tab="region"
-                                        class="py-2 uppercase bg-button bg-button--dark">
-                                    Gebiet
-                                </button>
-                                <button type="button"
-                                        data-action="tabs#select"
-                                        data-tabs-target="button"
-                                        data-tab="city"
-                                        class="py-2 uppercase bg-button bg-button--dark">
-                                    Ort
-                                </button>
                                 <f:if condition="{product.journey}">
-                                    <button type="button"
+                                    <f:render section="TabButton" arguments="{tab: 'journey', label: 'Anreise', wide: 0}"/>
-                                            data-action="tabs#select"
-                                            data-tabs-target="button"
-                                            data-tab="journey"
-                                            class="py-2 uppercase bg-button bg-button--dark">
-                                        Anreise
-                                    </button>
                                 </f:if>
                             </div>
                             <f:render section="Dates" arguments="{_all}"/>
@@ -80,8 +51,8 @@
                             <f:render section="City" arguments="{_all}"/>
                             <f:render section="Region" arguments="{_all}"/>
                             <f:render section="Journey" arguments="{_all}"/>
-                            <div class="md:hidden">
+                            <div class="lg:hidden">
-                                <f:render section="SidebarButtons" arguments="{_all}"/>
+                                <f:variable name="showGallery" value="0"/>
                                 <f:render section="Sidebar" arguments="{_all}"/>
                             </div>
                         </div>
@@ -107,19 +78,13 @@
 
             <f:if condition="{product.calendarHotel}">
                 <f:if condition="{product.season} == 's'">
-                    <f:render partial="Product/PriceCalendar.html" arguments="{_all}"/>
+                    <f:render partial="Product/PriceCalendar" arguments="{_all}"/>
 
                     <f:variable name="currentYear" value="{f:format.date(date: 'now', format: 'Y')}"/>
-                    <div hx-get="{ep:uri.ajax(action: 'priceTable', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel, year: currentYear}', format: 'html')}"
+                    <f:render section="PriceTable" arguments="{product: product, settings: settings, year: currentYear}"/>
-                         hx-trigger="load">
-                        <f:render section="TableLoadingIndicator"/>
-                    </div>
 
                     <f:variable name="nextYear" value="{f:format.date(date: '+1 year', format: 'Y')}"/>
-                    <div hx-get="{ep:uri.ajax(action: 'priceTable', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel, year: nextYear}', format: 'html')}"
+                    <f:render section="PriceTable" arguments="{product: product, settings: settings, year: nextYear}"/>
-                         hx-trigger="load">
-                        <f:render section="TableLoadingIndicator"/>
-                    </div>
                 </f:if>
             </f:if>
 
@@ -203,7 +168,9 @@
     </f:section>
 
     <f:section name="Sidebar">
-        <f:render section="SidebarGallery" arguments="{_all}"/>
+        <f:if condition="{showGallery}">
+            <f:render section="SidebarGallery" arguments="{_all}"/>
+        </f:if>
         <f:if condition="{product.tourLink}">
             <div class="bg-zinc-50 p-4 mb-4"
                  data-controller="lightbox">
@@ -323,60 +290,8 @@
         </div>
     </f:section>
 
-    <f:section name="Calendar">
-        <f:if condition="{product.calendarHotel}">
-            <div class="bg-zinc-50 p-4 flex flex-col space-y-2 relative mb-8">
-                <span class="block font-bold">
-                    Belegungskalender
-                </span>
-                <div data-controller="calendar"
-                     data-calendar-uri-value="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}"
-                     data-calendar-hotel-uid-value="{product.calendarHotel.uid}">
-                    <select class="w-full border-zinc-400 focus:border-zinc-400"
-                            data-calendar-target="field"
-                            data-action="calendar#select">
-                    </select>
-                    <f:if condition="{hotel.groupsPriceConfigs}">
-                        <f:then>
-                            <div class="mt-4 cursor-pointer"
-                                 data-controller="lightbox"
-                                 data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid, absolute: 1)}"
-                                 data-lightbox-type-value="external"
-                                 data-lightbox-height-value="85vh"
-                                 data-action="click->lightbox#open"
-                                 data-calendar-target="container"></div>
-                        </f:then>
-                        <f:else>
-                            <div class="mt-4"
-                                 data-calendar-target="container"></div>
-                        </f:else>
-                    </f:if>
-                    <div class="absolute top-0 left-0 inset-0 w-full h-full bg-white/85"
-                         data-calendar-target="loadingIndicator">
-                        <f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
-                    </div>
-                </div>
-                <f:if condition="{product.concept.code} == 'gsr'">
-                    <f:link.typolink class="button bg-button" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}">
-                        Zum Anfrageformular
-                    </f:link.typolink>
-                </f:if>
-            </div>
-        </f:if>
-    </f:section>
-
     <f:section name="SidebarButtons">
         <div class=" mb-4{f:if(condition: product.faqs, then: ' grid grid-cols-2 gap-px')}">
-            <f:comment><!--
-            <a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
-               class="block px-4 py-2 bg-red-500 text-white flex items-center space-x-2 col-span-2 md:col-span-3"
-               title="Corona Updates">
-                <svg class="w-4 h-4">
-                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-virus"></use>
-                </svg>
-                <span>Corona Updates</span>
-            </a>
-            --></f:comment>
             <f:if condition="{product.faqs}">
                 <button type="button"
                         class="w-full bg-button bg-button--dark text-white py-2"
@@ -412,45 +327,43 @@
                 <p class="font-bold mb-2">
                     Galerie
                 </p>
-                <a href="{f:uri.image(image: product.images.0, cropVariant: 'zoom', maxWidth: '2560')}"
+                <div class="grid grid-cols-4 gap-2">
-                   data-lightbox-target="thumb"
+                    <f:for each="{product.images}" as="image" iteration="iteration">
-                   data-lightbox-index="{iteration.cycle}"
+                        <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                   data-lightbox-caption="{image.originalResource.description}"
+                           data-lightbox-target="thumb"
-                   data-action="lightbox#open"
+                           data-lightbox-index="{iteration.cycle}"
-                   class="block mb-2">
+                           data-lightbox-caption="{image.originalResource.description}"
-                    <ep:lazyLoadImage image="{product.images.0}"
+                           data-action="lightbox#open"
-                                      loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                           class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}">
-                                      class="block w-full h-auto"
+                            <ep:lazyLoadImage image="{image}"
-                                      width="400"
+                                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                      height="225c+100"
+                                              class="block w-full h-auto"
-                                      alt="{image.alternative}"
+                                              width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
-                                      title="{image.title}" />
+                                              height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
-                </a>
+                        </a>
-                <f:if condition="{product.images -> f:count()} > 1">
+                    </f:for>
-                    <div class="grid grid-cols-4 gap-2">
+                </div>
-                        <f:for each="{product.images}" as="image" iteration="iteration">
-                            <f:if condition="{iteration.index} > 0">
-                                <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                                   data-lightbox-target="thumb"
-                                   data-lightbox-index="{iteration.cycle}"
-                                   data-lightbox-caption="{image.originalResource.description}"
-                                   data-action="lightbox#open">
-                                    <ep:lazyLoadImage image="{image}"
-                                                      loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                                      class="block w-full h-auto"
-                                                      width="160"
-                                                      height="160c+100"
-                                                      alt="{image.alternative}"
-                                                      title="{image.title}" />
-                                </a>
-                            </f:if>
-                        </f:for>
-                    </div>
-                </f:if>
             </div>
         </f:if>
     </f:section>
 
+    <f:section name="TabButton">
+        <button type="button"
+                data-action="tabs#select"
+                data-tabs-target="button"
+                data-tab="{tab}"
+                class="py-2 uppercase bg-button bg-button--dark{f:if(condition: wide, then: ' col-span-2')}">
+            {label}
+        </button>
+    </f:section>
+
+    <f:section name="PriceTable">
+        <div hx-get="{ep:uri.ajax(action: 'priceTable', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel, year: year}', format: 'html')}"
+             hx-trigger="load">
+            <f:render section="TableLoadingIndicator"/>
+        </div>
+    </f:section>
+
     <f:section name="TableLoadingIndicator">
         <div class="flex items-center justify-center space-x-4 text-sm p-4">
             <f:image class="block w-4 h-4" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt=""/>