templates/global/produktuebersicht.html.twig line 1

  1. <div id="products-container">
  2.     {% if produkte is defined and produkte is not empty %}
  3.     <div class="px-5 sm:px-20 pb-10">
  4.         <div class="font-medium text-base col-span-12">Wählen Sie einen Tarif zur Bestellung aus.</div>
  5.         <h4 class="fw-bolder">
  6.             <span class="text-slate-400 font-medium">{{ produkte|length}}
  7.                 Tarife gefunden</span>
  8.         </h4>
  9.         <div class="grid grid-cols-12 gap-4 gap-y-5 mt-5">
  10.             {% for produkt in produkte %}
  11.                 <div class="intro-y col-span-12 lg:col-span-6 xl:col-span-4 box">
  12.                     <form action="{{ produkt.linkWarenkorb }}" method="POST">
  13.                         <input type="hidden" name="gesamtpreis" value="{% if produkt.gesamtpreis is defined %}{{ produkt.gesamtpreis }}{% endif %}"/>
  14.                         <input type="hidden" name="spartencode" value="{{ produkt.spatencode }}"/>
  15.                         <input type="hidden" name="produktcode" value="{{ produkt.produktcode }}" class="form-input">
  16.                         <input type="hidden" name="jahresverbrauch" value="{{ jahresverbrauch }}" class="form-input">
  17.                         <input type="hidden" name="produktbeschreibung" value="{{ produkt.produktbeschreibung }}" class="form-input">
  18.                         
  19.                         <div class="flex items-center border-b border-slate-200/60 dark:border-darkmode-400 p-5 py-4">
  20.                             <div class="text-left">
  21.                                 <div class="font-medium text-base" style="">{{ produkt.produktbeschreibung }}</div> 
  22.                                 <div class="text-slate-500 truncate text-xs mt-0.5 hidden">Produktcode: {{ produkt.produktcode }}</div>
  23.                             </div>
  24.                         </div>
  25.                         
  26.                         <div class="p-5 mt-2">
  27.                             <div class="w-full">
  28.                                 <span>Gesamtpreis</span>
  29.                                 <span class="float-right">
  30.                                     {{ produkt.gesamtpreis }} €
  31.                                 </span>
  32.                             </div>
  34.                             <div class="w-full mt-2">
  35.                                 <span>Arbeitspreis</span>
  36.                                 <span class="float-right">
  37.                                     {{ produkt.arbeitspreisMitSteuern }} Ct/kWh
  38.                                 </span>
  39.                             </div>
  41.                             <div class="w-full mt-2">
  42.                                 <span>Grundpreis</span>
  43.                                 <span class="float-right">
  44.                                     {{ produkt.grundpreisMitSteuern }} €/Monat
  45.                                 </span>
  46.                             </div>
  48.                             <div class="w-full mt-2">
  49.                                 <span>Monatl. Abschlag</span>
  50.                                 <span class="float-right">
  51.                                     {{ produkt.monatlAbschlag }}
  52.                                     €
  53.                                     {% if produkt.anzahlAbschlaege < 12 %}
  54.                                         *
  55.                                     {% endif %}
  56.                                 </span>
  57.                             </div>
  59.                             <div class="w-full mt-2">
  60.                                 <span>Vertragslaufzeit</span>
  61.                                 <span class="float-right" data-minimum-term="{{ produkt.minimumTerm }}">
  62.                                     {{ produkt.vertragslaufzeit }}
  63.                                 </span>
  64.                             </div>
  66.                             <div class="w-full mt-2">
  67.                                 <span>Verlängerungszeitraum</span>
  68.                                 <span class="float-right" data-extension-periode="{{ produkt.extensionPeriod }}">
  69.                                     {{ produkt.verlaengerungszeitraum }}
  70.                                 </span>
  71.                             </div>
  73.                             <div class="w-full mt-2">
  74.                                 <span>Kündigungsfrist</span>
  75.                                 <span class="float-right" data-extension-notice="{{ produkt.extensionNotice }}">
  76.                                     {{ produkt.kuendigungsfrist }}
  77.                                 </span>
  78.                             </div>
  80.                             {% if produkt.anzahlAbschlaege < 12  %}
  81.                                 <div class="w-full flex flex-row gap-1 mt-2">
  82.                                     <div>*</div>
  83.                                     <div>{{ produkt.abschlagErklaerung }}</div>
  84.                                 </div>
  85.                             {% endif %}
  86.                         </div>
  87.                         
  88.                         <div class="px-5 pt-3 pb-5 border-t border-slate-200/60 dark:border-darkmode-400">
  89.                             <div class="w-full flex items-center mt-3">
  90.                                 <button class="btn btn-primary">
  91.                                     <span class="indicator-label">Tarif wählen</span>
  92.                                 </button>
  93.                             </div>
  94.                         </div>
  95.                     </form>
  96.                 </div>
  97.             {% endfor %}
  98.         </div>
  99.     </div>
  101.     {% elseif simulation %}
  102.         <div class="px-5 sm:px-20 pb-10">
  103.             <div class="grid grid-cols-12 gap-6 mt-5">
  104.                 <div class="intro-y col-span-12 lg:col-span-12">
  105.                     <div class="alert alert-secondary show flex flex-col items-start mb-2" role="alert">
  106.                             <p class="font-bold">Hinweis</p>
  107.                             <p>Es wurden keine passenden Tarife gefunden.</p>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     {% else %}
  113.         <div></div>
  114.     {% endif %}
  115. </div>