templates/default/detail.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  2. {% block content %}
  3. <style>
  4.   /* ── Header alignment (same as listing page) ──────────────────────────── */
  5.   header .wrapper>section>div.right ul li.remabutton {
  6.     padding-left: 20px !important;
  7.     padding-right: 20px !important;
  8.     padding-top: 0 !important;
  9.     height: 58px !important;
  10.     vertical-align: middle !important;
  11.     display: inline-flex !important;
  12.     align-items: center !important;
  13.   }
  14.   header .wrapper>section>div.right ul li.remabutton>a {
  15.     display: inline-flex !important;
  16.     align-items: center !important;
  17.     justify-content: center !important;
  18.     gap: 8px !important;
  19.     min-height: 44px !important;
  20.     line-height: 1 !important;
  21.     white-space: nowrap !important;
  22.   }
  23.   header .wrapper>section>div.right ul li.remabutton>a img {
  24.     position: relative !important;
  25.     top: 0 !important;
  26.     width: 18px !important;
  27.     height: 18px !important;
  28.     margin: 0 !important;
  29.     flex-shrink: 0 !important;
  30.   }
  32.   /* ── Content-top: border + compact height ────────────────────────────── */
  33.   .content .wrapper>section>article .content-top {
  34.     margin-bottom: 0 !important;
  35.   }
  36.   .content .wrapper>section>article .content-top>section {
  37.     border: 1px solid #ddd;
  38.     border-bottom: 2px solid #ddd;
  39.     border-radius: 2px;
  40.     margin-bottom: 20px;
  41.   }
  42.   .content .wrapper>section>article .content-top>section>div.left {
  43.     background: #fff !important;
  44.     padding: 20px 28px !important;
  45.   }
  46.   .content .wrapper>section>article .content-top>section>div.right {
  47.     background: #f3f4f5 !important;
  48.     border-left: none !important;
  49.   }
  51.   /* ── Shops row: flags + delete on same line ──────────────────────────── */
  52.   .pdp-shops-row {
  53.     display: flex;
  54.     align-items: center;
  55.     justify-content: space-between;
  56.     margin-top: 6px;
  57.   }
  58.   .pdp-shops-title {
  59.     margin-top: 12px;
  60.     margin-bottom: 2px;
  61.   }
  62.   .pdp-shops-title strong {
  63.     font-family: 'pill gothic 600mg rg';
  64.     font-weight: bold;
  65.     color: #222;
  66.     font-size: 15px;
  67.   }
  68.   .pdp-flags-list {
  69.     display: flex;
  70.     align-items: center;
  71.     flex-wrap: wrap;
  72.     gap: 8px;
  73.   }
  74.   .pdp-flags-list > div {
  75.     opacity: 0.5;
  76.     cursor: pointer;
  77.     transition: all 0.4s;
  78.   }
  79.   .pdp-flags-list > div.active {
  80.     opacity: 1;
  81.   }
  82.   .pdp-flags-list > div:hover {
  83.     opacity: 1;
  84.   }
  85.   .pdp-flags-list > div > section {
  86.     display: inline-block;
  87.   }
  88.   .pdp-flags-list > div > section > div {
  89.     padding: 5px 10px;
  90.     background: #f3f4f5;
  91.     border-radius: 2px;
  92.     display: inline-block;
  93.   }
  94.   .pdp-flags-list > div > section > div span {
  95.     font-family: 'pill gothic 600mg rg';
  96.     font-weight: bold;
  97.     color: #888;
  98.     font-size: 13px;
  99.     text-transform: uppercase;
  100.     display: inline-flex;
  101.     align-items: center;
  102.     gap: 4px;
  103.   }
  104.   .pdp-flags-list > div > section > div span img {
  105.     position: relative;
  106.     top: 0;
  107.   }
  108.   .pdp-delete-label {
  109.     font-family: 'pill gothic 600mg rg';
  110.     font-weight: bold;
  111.     color: #888;
  112.     font-size: 13px;
  113.     text-transform: uppercase;
  114.     cursor: pointer;
  115.     display: inline-flex;
  116.     align-items: center;
  117.     gap: 6px;
  118.     text-decoration: none;
  119.     transition: color 0.3s;
  120.     white-space: nowrap;
  121.     flex-shrink: 0;
  122.   }
  123.   .pdp-delete-label:hover { color: #e40017; }
  125.   /* ── Back button (Zurück) ─────────────────────────────────────────────── */
  126.   .remabutton.alt {
  127.     height: 48px !important;
  128.     padding-top: 0 !important;
  129.     padding-left: 20px !important;
  130.     padding-right: 20px !important;
  131.   }
  132.   .remabutton.alt a {
  133.     display: flex !important;
  134.     align-items: center !important;
  135.     justify-content: center !important;
  136.     height: 100% !important;
  137.     min-height: 0 !important;
  138.     font-size: 14px !important;
  139.     gap: 8px !important;
  140.     white-space: nowrap !important;
  141.   }
  142.   .remabutton.alt a img {
  143.     width: 16px !important;
  144.     height: 16px !important;
  145.     position: static !important;
  146.     flex-shrink: 0 !important;
  147.     filter: brightness(0) invert(1) !important;
  148.   }
  150.   /* ── Speichern button (toolbar) ───────────────────────────────────────── */
  151.   .pdp-toolbar .remabutton.safeproduct {
  152.     height: 48px !important;
  153.     padding-top: 0 !important;
  154.     padding-left: 20px !important;
  155.     padding-right: 20px !important;
  156.     width: 155px !important;
  157.   }
  158.   .pdp-toolbar .remabutton.safeproduct a {
  159.     display: flex !important;
  160.     align-items: center !important;
  161.     justify-content: center !important;
  162.     height: 100% !important;
  163.     min-height: 0 !important;
  164.     font-size: 14px !important;
  165.     gap: 8px !important;
  166.     white-space: nowrap !important;
  167.   }
  168.   .pdp-toolbar .remabutton.safeproduct a img {
  169.     width: 20px !important;
  170.     height: 20px !important;
  171.     position: static !important;
  172.     flex-shrink: 0 !important;
  173.   }
  175.   /* ── Toolbar: flex layout, Speichern & button pushed right ───────────── */
  176.   .pdp-toolbar > section {
  177.     display: flex !important;
  178.     align-items: center !important;
  179.     width: 100% !important;
  180.   }
  181.   .pdp-toolbar > section > div {
  182.     display: flex !important;
  183.     align-items: center !important;
  184.     width: auto !important;
  185.     vertical-align: unset !important;
  186.   }
  187.   .pdp-toolbar > section > div:nth-child(1),
  188.   .pdp-toolbar > section > div:nth-child(2) {
  189.     margin-right: 40px;
  190.   }
  191.   .pdp-toolbar > section > div:nth-child(3) {
  192.     margin-left: auto;
  193.     margin-right: 24px;
  194.   }
  195. </style>
  196. <div class="wrapper pdp-page">
  197.       <section>
  201.         <aside>
  202.           <div class="graph">
  203.             <img src="/static/img/graph.png">
  204.           </div>
  206.           <ul class="categories">
  207.             <li>
  208.               <strong>Katalog</strong>
  209.             </li>
  210.             <li>
  211.               <a href="#">Material Processing <small>(1441)</small><i>+</i></a>
  212.             </li>
  213.             <li>
  214.               <a href="#">Surface Protection <small>(177)</small><i>-</i></a>
  215.               <ul>
  216.                 <li>
  217.                   <a href="#">Gummierungs-Systeme <small>(128)</small></a>
  218.                 </li>
  219.                 <li>
  220.                   <a href="#">Beschichtungs-Systeme <small>(49)</small></a>
  221.                 </li>                
  222.               </ul>
  223.             </li>
  224.             <li>
  225.               <a href="#">Service <small>(706)</small><i>+</i></a>
  226.             </li>
  227.           </ul>
  229.           <ul class="misc">
  230.             <li>
  231.               <strong>Sonstiges</strong>
  232.             </li>
  233.             <li>
  234.               <a href="#">Downloads <small>(36)</small></a>
  235.             </li>
  236.             <li>
  237.               <a href="#">B-Ware <small>(36)</small></a>
  238.             </li>
  239.             <li>
  240.               <a href="#">CSV-Upload <small>(36)</small></a>
  241.             </li>
  242.             <li>
  243.               <a href="#">Offene Aufträge <small>(36)</small></a>
  244.             </li>
  245.             <li>
  246.               <a href="#">Abgeschlossene Aufträge <small>(36)</small></a>
  247.             </li>
  248.             <li>
  249.               <a href="#">Warenkörbe <small>(36)</small></a>
  250.             </li>
  251.             <li>
  252.               <a href="#">Media Center <small>(36)</small></a>
  253.             </li>                                                            
  254.           </ul>
  255.         </aside>
  259.         <article>
  262.           <div class="content-top">
  263.             <section>
  267.               <div class="left">
  268.                 <div class="fluid">
  269.                   <div class="span8">
  271.                     <div class="remabutton alt">
  272.                       <a href="/">
  273.                         <img src="/static/img/back.svg">
  274.                         Zurück
  275.                       </a>
  276.                     </div>
  279.                   </div>
  280.                   <div class="span4">
  281.                     <div class="pdp-lastmodified">
  282.                     <input type="hidden" id="id" value="{{product.id}}" />
  283.                       {% set creationdate = product.creationdate|date('U') %}
  284.                       {% set modificationdate = product.modificationdate|date('U') %}
  285.                       <label>Erstellt: {{creationdate|date('d.m.Y - H:i')}}</label>
  286.                       <label>Zuletzt bearbeitet: {{modificationdate|date('d.m.Y - H:i')}}</label>
  287.                       <label>Bearbeitet von: Hans Peter</label>
  288.                     </div>
  289.                   </div>
  290.                 </div>
  291.  
  292.                 <div class="clearleft"></div>
  294.                 <div class="pdp-shops-title">
  295.                   <strong>Produkt verfügbar für folgende Shops</strong>
  296.                 </div>
  298.                 <div class="pdp-shops-row">
  299.                   <div class="pdp-flags-list">
  300.                     <div class="active">
  301.                       <section><div><span><img src="/static/img/de.svg" height="14">DE</span></div></section>
  302.                     </div>
  303.                     <div class="active">
  304.                       <section><div><span><img src="/static/img/ch.svg" height="14">CH</span></div></section>
  305.                     </div>
  306.                     <div class="active">
  307.                       <section><div><span><img src="/static/img/lat.svg" height="14">LAT</span></div></section>
  308.                     </div>
  309.                     <div>
  310.                       <section><div><span><img src="/static/img/fr.svg" height="14">FR</span></div></section>
  311.                     </div>
  312.                     <div>
  313.                       <section><div><span><img src="/static/img/it.svg" height="14">IT</span></div></section>
  314.                     </div>
  315.                     <div class="active">
  316.                       <section><div><span><img src="/static/img/at.svg" height="14">AT</span></div></section>
  317.                     </div>
  318.                     <div>
  319.                       <section><div><span><img src="/static/img/esp.svg" height="14">ESP</span></div></section>
  320.                     </div>
  321.                   </div>
  322.                   <a href="#" class="pdp-delete-label">
  323.                     <img src="/static/img/delete.svg" width="14"> Löschung beantragen
  324.                   </a>
  325.                 </div>
  327.                 <div class="clearleft"></div>
  329.               </div>  
  330.               <div class="right">
  331.                 <div class="addnew">
  332.                   <i>+</i>
  333.                   <strong>Neues Produkt</strong>
  334.                 </div>
  335.               </div>
  336.             </section>
  337.           </div>
  340.           <section>
  342.             <section class="toolbar pdp-toolbar" style="border-top: 0;">
  343.               <section>
  344.                 <div>
  345.                   <label>Sprache</label>
  346.                   <section>
  347.                     <div>
  348.                       <span><img src="/static/img/de.svg" height="16">DE</span>
  349.                     </div>
  350.                   </section>
  351.                   <i class="chevron-arrow-down"></i>
  352.                 </div>       
  353.                 <div>
  354.                   <label>Status</label>
  355.                   <section>
  356.                     <div>
  357.                       <span><i class="red"></i>Entwurf</span>
  358.                     </div>                    
  359.                   </section>
  360.                   <i class="chevron-arrow-down"></i>
  361.                 </div>
  362.                 <div>
  363.                   <label class="toolbar-ai-label"><img src="/static/img/ai_icon.svg"> Speichern &amp; Übersetzen</label>
  364.                 </div>
  365.                 <div>
  366.                   <div class="remabutton safeproduct">
  367.                     <a href="#">
  368.                       <img src="/static/img/safe_icon.svg">
  369.                       Speichern
  370.                     </a>
  371.                   </div>
  372.                 </div>
  373.               </section>
  374.             </section>
  376.             <section class="pdp">
  378.               <div class="fluid">
  379.                 <div class="span4">
  380.                   <div class="input padding-right">
  381.                     <label>Artikelnummer</label>
  382.                     <div class="checkbox">
  383.                       <input type="checkbox">
  384.                       <span>Global</span>
  385.                     </div>
  386.                     <div class="field">
  387.                       <input type="text" placeholder="{{product.sku}}">
  388.                     </div>
  389.                   </div>
  390.                 </div>
  391.                 <div class="span8">
  392.                   <div class="input padding-left">
  393.                     <label>Produkttitel</label>
  394.                     <div class="checkbox">
  395.                       <input type="checkbox">
  396.                       <span>Global</span>
  397.                     </div>
  398.                     <div class="field">
  399.                       <input type="text" placeholder="{{product.name_de}}">
  400.                     </div>
  401.                   </div>
  402.                 </div>
  403.               </div>
  405.               <div class="clearleft"></div>
  407.               <div class="fluid">
  408.                 <div class="span6">
  409.                   <div class="standalone-inputlabel">Bilder &amp; Videos</div>
  410.                   <div class="photos">
  411.                     <div class="fluid">
  412.                       <div class="span5 left">
  413.                         <div style="background-image: url({{ product.mainimage.thumbnail('product_listing') }});"></div>
  414.                         
  415.                       </div>
  416.                       <div class="span7 right">
  417.                         <div style="background-image: url({{ product.mainimage.thumbnail('product_listing') }});"></div>
  418.                         <div style="background-image: url({{ product.mainimage.thumbnail('product_listing') }});"></div>
  419.                         <div style="background-image: url({{ product.mainimage.thumbnail('product_listing') }});"></div>
  420.                         <div style="background-image: url({{ product.mainimage.thumbnail('product_listing') }});"></div>
  421.                       </div>
  422.                     </div>
  423.                   </div>
  424.                 </div>
  425.                 <div class="span6">
  426.                   <div class="standalonecheckbox">
  427.                     <input type="checkbox" checked="">
  428.                     <span>Global</span>
  429.                   </div>
  430.                   <div class="upload">
  431.                     <img src="/static/img/upload.png" height="200">
  432.                   </div>
  433.                 </div>
  434.               </div>
  436.               <div class="clearleft"></div>
  438.               <div class="fluid">
  439.                 <div class="span2">
  440.                   <div class="input padding-right label">
  441.                     <label>Preis</label>
  442.                     <div class="field">
  443.                       <i>CHF</i>
  444.                       <input type="text" placeholder="" value="1'456.00">
  445.                     </div>
  446.                   </div>
  447.                 </div>
  448.                 <div class="span2">
  449.                   <div class="input padding-right label">
  450.                     <label>&nbsp;</label>
  451.                     <div class="field">
  452.                       <i>€</i>
  453.                       <input type="text" placeholder="" value="1'456.00">
  454.                     </div>
  455.                   </div>
  456.                 </div>
  457.                 <div class="span2">
  458.                   <div class="input padding-right label">
  459.                     <label>&nbsp;</label>
  460.                     <div class="field">
  461.                       <i>$</i>
  462.                       <input type="text" placeholder="" value="1'456.00">
  463.                     </div>
  464.                   </div>
  465.                 </div>
  466.                 <div class="span2">
  467.                   <div class="input padding-right label">
  468.                     <label>&nbsp;</label>
  469.                     <div class="field">
  470.                       <i>ARS</i>
  471.                       <input type="text" placeholder=" " value="1'456.00">
  472.                     </div>
  473.                   </div>
  474.                 </div>
  475.                 <div class="span2">
  476.                   <div class="magicbutton">
  477.                     <label><img src="/static/img/ai_icon.svg" width="16"> Umrechnen</label>
  478.                   </div>
  479.                 </div>                                                                
  480.               </div>
  482.               <div class="clearleft"></div>
  484.               <div class="fluid">
  485.                 <div class="span3">
  486.                   <div class="input padding-right">
  487.                     <label>Anzahl Lager</label>
  488.                     <div class="checkbox">
  489.                       <input type="checkbox" checked="">
  490.                       <span>Global</span>
  491.                     </div>
  492.                     <div class="field">
  493.                       <input type="text" placeholder="" value="{{product.qty}}">
  494.                     </div>
  495.                   </div>
  496.                 </div>
  497.                 <div class="span7">
  498.                   <div class="input padding-left">
  499.                     <label>Lagernotiz</label>
  500.                     <div class="checkbox">
  501.                       <input type="checkbox">
  502.                       <span>Global</span>
  503.                     </div>
  504.                     <div class="field">
  505.                       <input type="text" placeholder="" value="Artikel auf Lager">
  506.                     </div>
  507.                   </div>
  508.                 </div>
  509.                 <div class="span2">
  510.                   <div class="magicbutton">
  511.                     <label><img src="/static/img/lager_icon.svg" width="18"> Erweitert</label>
  512.                   </div>
  513.                 </div>
  514.               </div>
  516.  <div class="clearleft"></div>
  518.               <div class="fluid">
  519.                 <div class="span4">
  520.                   <div class="input padding-right">
  521.                     <label>Kurzbeschreibung</label>
  522.                     <div class="checkbox">
  523.                       <input type="checkbox">
  524.                       <span>Global</span>
  525.                     </div>
  526.                     <div class="textarea-ai-button-row">
  527.                       <div class="magicbutton textarea-ai-button">
  528.                         <label class="textarea-ai-button-label">
  529.                          
  530.                         </label>
  531.                         <div class="textarea-ai-button-menu">
  532.                           <div class="magic-action"><img src="/static/img/abc.svg"> Text komprimieren</div>
  533.                           <div class="magic-action"><img src="/static/img/longer.svg"> Text länger machen</div>
  534.                           <div class="magic-action"><img src="/static/img/shorter.svg"> Text kürzen</div>
  535.                           <div class="magic-action"><img src="/static/img/grammatik.svg"> Grammatik</div>
  536.                         </div>
  537.                       </div>
  538.                     </div>
  539.                     <div class="field">
  540.                       <textarea name="short_description_de" id="editor2">{{product.short_description_de | raw}}</textarea>
  541.                       <script>
  542.                       CKEDITOR.replace('editor2', {
  543.                         toolbar: [
  544.                           { name: 'paragraph', items: [ 'NumberedList', 'BulletedList' ] },
  545.                           { name: 'links',     items: [ 'Link', 'Unlink' ] }
  546.                         ],
  547.                         removePlugins: 'elementspath,resize,contextmenu',
  548.                         resize_enabled: false,
  549.                         allowedContent: true
  550.                       });
  551.                     </script>
  552.                     </div>
  553.                   </div>
  554.                 </div>
  555.                 <div class="span8">
  556.                   <div class="input padding-left">
  557.                     <label>Beschreibung</label>
  558.                     <div class="checkbox">
  559.                       <input type="checkbox">
  560.                       <span>Global</span>
  561.                     </div>
  562.                     <div class="textarea-ai-button-row">
  563.                       <div class="magicbutton textarea-ai-button">
  564.                         <label class="textarea-ai-button-label">
  565.                          
  566.                         </label>
  567.                         <div class="textarea-ai-button-menu">
  568.                           <div class="magic-action"><img src="/static/img/abc.svg"> Text komprimieren</div>
  569.                           <div class="magic-action"><img src="/static/img/longer.svg"> Text länger machen</div>
  570.                           <div class="magic-action"><img src="/static/img/shorter.svg"> Text kürzen</div>
  571.                           <div class="magic-action"><img src="/static/img/grammatik.svg"> Grammatik</div>
  572.                         </div>
  573.                       </div>
  574.                     </div>
  575.                     <div class="field">
  576.                       <textarea name="description_de" id="editor1">{{ product.description_de | raw }}</textarea>
  577.                       <script>
  578.                       CKEDITOR.replace('editor1', {   
  579.                         toolbar: [
  580.                           { name: 'clipboard',   items: [ 'Undo', 'Redo' ] },
  581.                           { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
  582.                           { name: 'paragraph',   items: [ 'NumberedList', 'BulletedList' ] },
  583.                           { name: 'links',       items: [ 'Link', 'Unlink' ] }
  584.                         ],
  585.                         removePlugins: 'elementspath,resize,contextmenu',
  586.                         resize_enabled: false,
  587.                         removeButtons: '',
  588.                         allowedContent: true
  589.                       });
  590.                     </script>  
  591.                     </div>
  592.                   </div>
  593.                 </div>
  594.               </div>
  596.  <div class="clearleft"></div>
  598.               <div class="fluid">
  599.                 <div class="span3 span3-alt">
  600.                   <div class="input label padding-right">
  601.                     <label>
  602.                       <img src="/static/img/pdf.svg" style="width:18px;height:auto;vertical-align:middle;margin-right:5px;">
  603.                       Dokumente
  604.                     </label>
  605.                     <div class="checkbox">
  606.                       <input type="checkbox">
  607.                       <span>Global</span>
  608.                     </div>
  609.                     <div class="field">
  610.                       <a href="{{product.safety_data_sheet_en}}" target="_blank"><i>PDF</i></a>
  611.                       <input type="text" placeholder="" value="Sicherheitsdatenblatt">
  612.                     </div>
  613.                     <p><a href="{{product.safety_data_sheet_en}}" target="_blank">Open document</a></p>
  614.                   </div>
  615.                 </div>
  617.                 <div class="span3 span3-alt">
  618.                   <div class="input label padding-right">
  619.                     <label>&nbsp;</label>
  620.                     <div class="field">
  621.                       <a href="{{product.safety_data_sheet_de}}" target="_blank"><i>PDF</i></a>
  622.                       <input type="text" placeholder="" value="Anleitung">
  623.                     </div>
  624.                     <p><a href="{{product.safety_data_sheet_de}}" target="_blank">Open document</a></p>
  625.                   </div>
  626.                 </div>
  628.                 <div id="addnewdocumentouter" class="span3 span3-alt">
  629.                   <div class="input padding-right label">
  630.                     <div id="addnewdocument" class="newdocument">+</div>
  631.                   </div>
  632.                 </div>
  635.               </div>
  639.  <div class="clearleft"></div>
  642.               
  644.               <div class="fluid">
  645.                 <div class="span4">
  646.                   <div class="input padding-right">
  647.                     <label>Gewicht</label>
  648.                     <div class="checkbox">
  649.                       <input type="checkbox" checked="">
  650.                       <span>Global</span>
  651.                     </div>
  652.                     <div class="field">
  653.                       <input type="text" placeholder="" value="{{product.spezifisches_gewicht}}">
  654.                     </div>
  655.                   </div>
  656.                 </div>
  657.                 <div class="span4">
  658.                   <div class="input padding-left">
  659.                     <label>Inhalt</label>
  660.                     <div class="checkbox">
  661.                       <input type="checkbox" checked="" >
  662.                       <span>Global</span>
  663.                     </div>
  664.                     <div class="field">
  665.                       <input type="text" placeholder="" value="{{product.content}}">
  666.                     </div>
  667.                   </div>
  668.                 </div>
  669.                 <div class="span4">
  670.                   <div class="input padding-left">
  671.                     <label>Masse</label>
  672.                     <div class="checkbox">
  673.                       <input type="checkbox" checked="">
  674.                       <span>Global</span>
  675.                     </div>
  676.                     <div class="field">
  677.                       <input type="text" placeholder="" value="{{product.warengruppenstruktur}}">
  678.                     </div>
  679.                   </div>
  680.                 </div>                
  681.               </div>
  682.               <div class="fluid">
  683.                 <div class="span4">
  684.                   <div class="input padding-right">
  685.                     <label>Maximale Bestellmenge</label>
  686.                     <div class="checkbox">
  687.                       <input type="checkbox" checked="">
  688.                       <span>Global</span>
  689.                     </div>
  690.                     <div class="field">
  691.                       <input type="text" placeholder="" value="{{product.maximale_bestellmenge}}">
  692.                     </div>
  693.                   </div>
  694.                 </div>
  695.                 <div class="span4">
  696.                   <div class="input padding-left">
  697.                     <label>Packungsmenge</label>
  698.                     <div class="checkbox">
  699.                       <input type="checkbox" checked="" >
  700.                       <span>Global</span>
  701.                     </div>
  702.                     <div class="field">
  703.                       <input type="text" placeholder="" value="{{product.packungsmenge}}">
  704.                     </div>
  705.                   </div>
  706.                 </div>
  707.                 <div class="span4">
  708.                   <div class="input padding-left">
  709.                     <label>Lieferbar am</label>
  710.                     <div class="checkbox">
  711.                       <input type="checkbox" checked="">
  712.                       <span>Global</span>
  713.                     </div>
  714.                     <div class="field">
  715.                       <input type="text" placeholder="" value="{{product.lieferbar_am}}">
  716.                     </div>
  717.                   </div>
  718.                 </div>                
  719.               </div>
  720.               <div class="fluid">
  721.                 <div class="span4">
  722.                   <div class="input padding-right">
  723.                     <label>Wieder lieferbar</label>
  724.                     <div class="checkbox">
  725.                       <input type="checkbox" checked="">
  726.                       <span>Global</span>
  727.                     </div>
  728.                     <div class="field">
  729.                       <input type="text" placeholder="" value="{{product.wieder_lieferbar}}">
  730.                     </div>
  731.                   </div>
  732.                 </div>
  733.                 <div class="span4">
  734.                   <div class="input padding-left">
  735.                     <label>Polymerbasis</label>
  736.                     <div class="checkbox">
  737.                       <input type="checkbox" checked="" >
  738.                       <span>Global</span>
  739.                     </div>
  740.                     <div class="field">
  741.                       <input type="text" placeholder="" value="{{product.polymerbasis}}">
  742.                     </div>
  743.                   </div>
  744.                 </div>
  745.                 <div class="span4">
  746.                   <div class="input padding-left">
  747.                     <label>UN Nummer</label>
  748.                     <div class="checkbox">
  749.                       <input type="checkbox" checked="">
  750.                       <span>Global</span>
  751.                     </div>
  752.                     <div class="field">
  753.                       <input type="text" placeholder="" value="{{product.un_nummer}}">
  754.                     </div>
  755.                   </div>
  756.                 </div>                
  757.               </div>
  758.               <div class="fluid">
  759.                 <div class="span4">
  760.                   <div class="input padding-right">
  761.                     <label>Solvent</label>
  762.                     <div class="checkbox">
  763.                       <input type="checkbox" checked="">
  764.                       <span>Global</span>
  765.                     </div>
  766.                     <div class="field">
  767.                       <input type="text" placeholder="" value="{{product.losungsmittel}}">
  768.                     </div>
  769.                   </div>
  770.                 </div>
  771.                 <div class="span4">
  772.                   <div class="input padding-left">
  773.                     <label>Bezeichnung</label>
  774.                     <div class="checkbox">
  775.                       <input type="checkbox" checked="" >
  776.                       <span>Global</span>
  777.                     </div>
  778.                     <div class="field">
  779.                       <input type="text" placeholder="" value="{{product.bezeichnung}}">
  780.                     </div>
  781.                   </div>
  782.                 </div>
  783.                 <div class="span4">
  784.                   <div class="input padding-left">
  785.                     <label>Zolltarifnummer</label>
  786.                     <div class="checkbox">
  787.                       <input type="checkbox" checked="">
  788.                       <span>Global</span>
  789.                     </div>
  790.                     <div class="field">
  791.                       <input type="text" placeholder="" value="{{product.zolltarifnummer}}">
  792.                     </div>
  793.                   </div>
  794.                 </div>                
  795.               </div>
  797.               <div class="fluid">
  798.                 <div class="span4">
  799.                   <div class="input padding-right">
  800.                     <label>Warengruppenstruktur</label>
  801.                     <div class="checkbox">
  802.                       <input type="checkbox" checked="">
  803.                       <span>Global</span>
  804.                     </div>
  805.                     <div class="field">
  806.                       <input type="text" placeholder="" value="{{product.warengruppenstruktur}}">
  807.                     </div>
  808.                   </div>
  809.                 </div>
  810.                 <div class="span4">
  811.                   <div class="input padding-left">
  812.                     <label>Nettogewicht</label>
  813.                     <div class="checkbox">
  814.                       <input type="checkbox" checked="" >
  815.                       <span>Global</span>
  816.                     </div>
  817.                     <div class="field">
  818.                       <input type="text" placeholder="" value="{{product.nettogewicht}}">
  819.                     </div>
  820.                   </div>
  821.                 </div>
  822.                 <div class="span4">
  823.                   <div class="input padding-left">
  824.                     <label>Gefahrgut</label>
  825.                     <div class="checkbox">
  826.                       <input type="checkbox" checked="">
  827.                       <span>Global</span>
  828.                     </div>
  829.                     <div class="field">
  830.                       <input type="text" placeholder="" value="{{product.gefahrgut}}">
  831.                     </div>
  832.                   </div>
  833.                 </div>                
  834.               </div>
  836.               <div class="fluid">
  837.                 <div class="span4">
  838.                   <div class="input padding-right">
  839.                     <label>Formularart</label>
  840.                     <div class="checkbox">
  841.                       <input type="checkbox" checked="">
  842.                       <span>Global</span>
  843.                     </div>
  844.                     <div class="field">
  845.                       <input type="text" placeholder="" value="{{product.formularart}}">
  846.                     </div>
  847.                   </div>
  848.                 </div>                
  849.               </div>
  851. <div class="clearleft"></div>
  854.             </section>
  856.             <section class="toolbar pdp-toolbar" style="border-bottom: 0;">
  857.               <section>
  858.                 <div>
  859.                   <label>Sprache</label>
  860.                   <section>
  861.                     <div>
  862.                       <span><img src="/static/img/de.svg" height="16">DE</span>
  863.                     </div>
  864.                   </section>
  865.                   <i class="chevron-arrow-down"></i>
  866.                 </div>       
  867.                 <div>
  868.                   <label>Status</label>
  869.                   <section>
  870.                     <div>
  871.                       <span><i class="red"></i>Entwurf</span>
  872.                     </div>                    
  873.                   </section>
  874.                   <i class="chevron-arrow-down"></i>
  875.                 </div>
  876.                 <div>
  877.                   <label class="toolbar-ai-label"><img src="/static/img/ai_icon.svg"> Speichern &amp; Übersetzen</label>
  878.                 </div>
  879.                 <div>
  880.                   <div class="remabutton safeproduct">
  881.                     <a href="#">
  882.                       <img src="/static/img/safe_icon.svg">
  883.                       Speichern
  884.                     </a>
  885.                   </div>
  886.                 </div>
  887.               </section>
  888.             </section>
  891.           </section>
  892.         </article>
  895.       </section>
  896.     </div>
  898. <script>
  899.   $(document).ready(function() {
  900.     $(document).on('click', '.textarea-ai-button-label', function(e) {
  901.       e.stopPropagation();
  902.       var $menu = $(this).closest('.textarea-ai-button').find('.textarea-ai-button-menu');
  903.       $('.textarea-ai-button-menu').not($menu).hide();
  904.       $menu.toggle();
  905.     });
  906.     $(document).on('click', function(e) {
  907.       if (!$(e.target).closest('.textarea-ai-button').length) {
  908.         $('.textarea-ai-button-menu').hide();
  909.       }
  910.     });
  911.   });
  912. </script>
  913. {% endblock %}