{% extends "layout.html.twig" %}{% block content %}<style> .content .wrapper>section>article .content-top>section>div.left .search>div>section.searchicon, .content .wrapper>section>article .content-top>section>div.left .search>div>section.input, .content .wrapper>section>article .content-top>section>div.left .search>div>section.input input { height: 52px !important; } .content .wrapper>section>article .content-top>section>div.left .search>div>section.searchicon { width: 52px !important; } .content .wrapper>section>article .content-top>section>div.left .search>div>section.searchicon>img { top: 0px !important; left: 14px !important; } .content .wrapper>section>article .content-top>section>div.left .search .remabutton { padding-left: 14px !important; padding-right: 14px !important; height: 52px !important; padding-top: 2px !important; } .content .wrapper>section>article .content-top>section>div.left .search .remabutton>a, .content .wrapper>section>article>section .catalog>div>ul>li>div.controls .remabutton>a, header .wrapper>section>div.right ul li.remabutton>a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 44px !important; line-height: 1 !important; white-space: nowrap !important; padding-left:1em; } .content .wrapper>section>article .content-top>section>div.left .search .remabutton>a img, .content .wrapper>section>article>section .catalog>div>ul>li>div.controls .remabutton>a img, header .wrapper>section>div.right ul li.remabutton>a img { position: relative !important; top: 0 !important; width: 18px !important; height: 18px !important; margin: 0 !important; flex-shrink: 0 !important; } .content .wrapper>section>article>section .catalog>div>ul>li>div.controls .remabutton { padding-left: 18px !important; padding-right: 18px !important; height: 50px !important; padding-top: 2px !important; } header .wrapper>section>div.right ul li.remabutton { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0 !important; height: 58px !important; display: inline-flex !important; align-items: center !important; } .content .wrapper>section>article>section.listing-panel .toolbar { border-top: 0 !important; } .content .wrapper>section>article>section.listing-panel .listing-toolbar>section { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 24px !important; } .content .wrapper>section>article>section.listing-panel .listing-toolbar>section>div { display: inline-flex !important; align-items: center !important; width: auto !important; } .content .wrapper>section>article>section.listing-panel .listing-toolbar>section>div label { white-space: nowrap !important; } .content .wrapper>section>article>section.listing-panel .listing-toolbar>section>div>section>div { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } .content .wrapper>section>article>section.listing-panel .listing-toolbar>section>div>i { margin-left: 8px !important; } @media screen and (max-width: 1400px) { .content .wrapper>section>article>section.listing-panel .listing-toolbar>section { gap: 18px !important; } }</style><div class="wrapper"> <section> <aside> <div class="graph"> <img src="/static/img/graph.png"> </div> <ul class="categories"> <li> <strong>Katalog</strong> </li> <li> <a href="#"> Material Processing <small>(1441)</small> <i>+</i> </a> </li> <li> <a href="#"> Surface Protection <small>(177)</small> <i>-</i> </a> <ul> <li> <a href="#">Gummierungs-Systeme<small>(128)</small></a> </li> <li> <a href="#">Beschichtungs-Systeme<small>(49)</small></a> </li> </ul> </li> <li> <a href="#"> Service <small>(706)</small> <i>+</i> </a> </li> </ul> <ul class="misc"> <li> <strong>Sonstiges</strong> </li> <li> <a href="#"> Downloads <small>(36)</small> </a> </li> <li> <a href="#"> B-Ware <small>(36)</small> </a> </li> <li> <a href="#"> CSV-Upload <small>(36)</small> </a> </li> <li> <a href="#"> Offene Aufträge <small>(36)</small> </a> </li> <li> <a href="#"> Abgeschlossene Aufträge <small>(36)</small> </a> </li> <li> <a href="#"> Warenkörbe <small>(36)</small> </a> </li> <li> <a href="#"> Media Center <small>(36)</small> </a> </li> </ul> </aside> <article> <div class="content-top"> <section> <div class="left"> <div class="search"> <div> <section class="searchicon"> <img src="/static/img/search.svg" /> </section> <section class="input"> <input type="text" name="search-input" id="search-input" placeholder="Artikelnummer, Suchbegriffe" value="{{query}}" /> </section> <div class="remabutton"> <a href="javascript:void(0)" id="search-link"> Artikel finden <img src="/static/img/arrow-ic.svg" /> </a> </div> </div> </div> <div class="countries"> <div class="active"> <section> <div> <span><img src="/static/img/de.svg" height="16" />DE</span> </div> </section> </div> <div class="active"> <section> <div> <span><img src="/static/img/ch.svg" height="16" />CH</span> </div> </section> </div> <div class="active"> <section> <div> <span><img src="/static/img/lat.svg" height="16" />LAT</span> </div> </section> </div> <div> <section> <div> <span><img src="/static/img/fr.svg" height="16" />FR</span> </div> </section> </div> <div> <section> <div> <span><img src="/static/img/it.svg" height="16" />IT</span> </div> </section> </div> <div class="active"> <section> <div> <span><img src="/static/img/at.svg" height="16" />AT</span> </div> </section> </div> <div> <section> <div> <span><img src="/static/img/esp.svg" height="16" />ESP</span> </div> </section> </div> <div class="allshops"> <section> <div> <span>Alle Shops</span> </div> </section> </div> </div> </div> <div class="right"> <div class="addnew"> <i>+</i> <strong>Produkt hinzufügen</strong> </div> </div> </section> </div> <section class="listing-panel"> <section class="toolbar listing-toolbar"> <section> <div> <label>Aktion</label> <section> <div> <span>Veröffentlichen</span> <small>(3)</small> </div> </section> <i class="chevron-arrow-down"></i> </div> <div> <label>Filter</label> <section> <div> <span> <i class="red"></i>Entwurf</span> </div> </section> <i class="chevron-arrow-down"></i> </div> <div> <label>Sortieren</label> <section> <div> <span>Neueste</span> </div> </section> <i class="chevron-arrow-down"></i> </div> <div> <label>Sprache</label> <section> <div> <span><img src="/static/img/de.svg" height="16" />DE</span> </div> </section> <i class="chevron-arrow-down"></i> </div> </section> </section> {% if pagination %} <section class="catalog"> <div> <ul> {% for product in pagination %} <li> <div class="select-col"> <input type="checkbox"> </div> <div class="photo"> {% if product.mainimage %} <img src="{{ product.mainimage.thumbnail('product_listing') }}" alt="{{ product.name_de }}"> {% endif %} </div> <div class="infos"> <label>{{product.sku}}</label> <h3>{{product.name_de}}</h3> {% set creationdate = product.creationdate|date('U') %} <span>Erstellt: {{creationdate|date('d.m.Y - H:i')}}</span> {% set modificationdate = product.modificationdate|date('U') %} <span>Zuletzt bearbeitet:{{modificationdate|date('d.m.Y - H:i')}}</span> </div> <div class="controls"> <div class="status"> <section> <div> <span> <i class="red"></i>Entwurf</span> </div> </section> <i class="chevron-arrow-down"></i> </div> <div class="edit"> <div class="remabutton"> <a href="{{ path('product_detail', { 'id': product.id }) }}" style="padding-left:0px;"> Bearbeiten <img src="/static/img/arrow-ic.svg" /> </a> </div> </div> <div class="delete"> <a href="#"> <img src="/static/img/delete.svg" /> Löschung beantragen </a> </div> </div> </li> {% endfor %} </ul> </div> </section> {% endif %} <section class="priceinfo"> Alle Preise sind inkl. MwSt ausgewiesen. </section> <section class="pagination"> <ul> {% if pagination.previous is defined %} <li><a href="{{ path(app.request.get('_route'), app.request.query.all|merge({'page': pagination.previous})) }}">« Previous</a></li> {% endif %} {% for page in pagination.paginationData.pagesInRange %} <li> <a {% if page == pagination.currentPageNumber %} class="active"{% endif %} href="{{ path(app.request.get('_route'), app.request.query.all|merge({'page': page})) }}">{{ page }}</a> </li> {% endfor %} {% if pagination.next is defined %} <li><a href="{{ path(app.request.get('_route'), app.request.query.all|merge({'page': pagination.next})) }}">Next »</a></li> {% endif %} </ul></section> </section> </article> </section></div><script> document.addEventListener('DOMContentLoaded', function() { document.getElementById('search-link').addEventListener('click', function(event) { event.preventDefault(); const query = document.getElementById('search-input').value; const url = new URL(window.location.href); url.searchParams.set('q', query); window.location.href = url.toString(); }); });</script>{% endblock %}